+65 8180 0424
Tutorial on CSS3 Photogallery
The Final output
Please note:This CSS based photogallery tutorial works perfectly fine only in Google Chrome.
Photogalleries are an appropriate and desirable way of representing your pictures. Until now all these Photogalleries were made mostly in Flash but in this tutorial we get to know how the same can be done with the help of CSS stylesheets.
In the First step, a div has been assigned for the background of the images, which is a wooden plank in this case. We can also use the repeat-X or repeat-Y property in order to increase your image along the X or Y axis respectively.
|
#div_image |
All the images to be displayed are kept in the folder along with the HTML file and The CSS Style sheet. The div assigned to the images is given in the code below:
|
#div_singleimg |
We also want that in our photogallery whenever we hover over a particular picture, that picture should come above all the others. Hence the following code:
|
#div_singleimg:hover |
In the Second step, We apply styles to the images:
|
.transform1 |
The rotateZ(deg) in the second line of the code helps to state the degree of angle by which we want our picture to rotate, and the other part of the line i.e. scale(X) is used to scale / zoom the images in Webkit browsers. The -moz-transform:scale(X) does the same in case of mozilla browsers. Similarly, the -webkit-transition-duration helps us to enter the duration for which we want to scale and zoom.(This part of the code will be explained properly below)
In the Third Step, We give hover effects to the images:
|
.transform2:hover |
In this photogallery, we wanted that as soon as we rollover /mouse-over an image, that image should come above all the others, should rotate 360 degrees, zoom-in and include shadow.
Second line of the code (as mentioned above), we state the rollover time duration. Whereas the rollout time duration was given in 'transform1' class fourth line.
The -webkit-transition-duration: 0.5s is the time each picture will take to scale from a smaller size to a larger size image on rollover / hovering.
The'-webkit-box-shadow' property has been used to give glow effect to the images on rollover / hover, in Webkit browsers respectively.
Another point worth noticing is that the rotateZ(deg) property has been used both in the second as well as the third step. The reason is that when used in the second step it specifies the tilt before hovering and in the third step it specifies the final degree of rotation.
Depending upon the number of images used in the photogallery, these styles can be assigned to them. In this case, we have specified different styles for each image so that we can customize each image leaving it with a different effect. Styles assigned to different images but not in any specific order is given below:
|
.transform2 .transform3 .transform3:hover .transform4 .transform5
.transform6 .transform7 |
The HTML Code:
|
<div id="div_image" align="left" style="vertical-align:top;">
<div id="div_image" align="left" style="vertical-align:top;"> |
With this we come to an end of the tutorial. I hope this helps you in making nice photogalleries in future.
ABOUT IMAJINE
Team Imajine is a good mix of design and code –with an eye for detail and strong belief in accessibility and usability. We are a web design and development company based in Singapore focusing on generating a strong online presence and visibility for our customers.
IMAJINE ACROSS WEB
