PSD-HTML. These Pixel perfect HTML pages will be tested on Chrome, Firefox, IE, Safari on OS X and Windows Imajine will help you create your own fan page in facebook with an eye appealing graphic banner for its welcome page Custom CMS theme building weboranje.com - showcase of inspirational web 2.0 websites
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
{
background-image:url(bg.png);
background-position:top;
width:615px;
height:305px;
display:block;
}

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
{
height:307px;
width:280px;
display:inline;
position:absolute;
}

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
{
z-index:100;
}

In the Second step, We apply styles to the images:

.transform1
{
cursor:pointer;
-webkit-transform: rotateZ(5deg) scale(0.5);
-moz-transform: scale(.5);
-webkit-transition-duration: 0.5s;
z-index:0;
}

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
{
-webkit-transform: rotateZ(360deg) scale(1);
-webkit-transition-duration: 0.5s;
-webkit-box-shadow:0px 0px 7px #000;
z-index:10;
}


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
{
cursor:pointer;
-webkit-transform: rotateZ(20deg) scale(0.5);
-moz-transform: scale(.5);
-webkit-transition-duration: 0.5s;
z-index:1;
}
.transform2:hover
{
-webkit-transform: rotateZ(360deg) scale(1);
-webkit-transition-duration: 0.5s;
-webkit-box-shadow:0px 0px 7px #000;
z-index:10;
}

.transform3
{
cursor:pointer;
-webkit-transform: rotateZ(0deg) scale(0.5);
-moz-transform: scale(.5);
-webkit-transition-duration: 0.5s;
z-index:0;
}
.transform3:hover
{
-webkit-transform: rotateZ(360deg) scale(1);
-webkit-transition-duration: 0.5s;
-webkit-box-shadow:0px 0px 7px #000;
z-index:10;
}

.transform4
{
cursor:pointer;
-webkit-transform: rotateZ(30deg) scale(0.5);
-moz-transform: scale(.5);
-webkit-transition-duration: 0.5s;
z-index:0;
}
.transform4:hover
{
-webkit-transform: rotateZ(360deg) scale(1);
-webkit-transition-duration: 0.5s;
-webkit-box-shadow:0px 0px 7px #000;
z-index:10;
}

.transform5
{
cursor:pointer;
-webkit-transform: rotateZ(2deg) scale(0.5);
-moz-transform: scale(.5);
-webkit-transition-duration: 0.5s;
z-index:0;
}
.transform5:hover
{
-webkit-transform: rotateZ(360deg) scale(1);
-webkit-transition-duration: 0.5s;
-webkit-box-shadow:0px 0px 7px #000;
z-index:10;
}

.transform6
{
cursor:pointer;
-webkit-transform: rotateZ(200deg) scale(0.5);
-moz-transform: scale(.5);
-webkit-transition-duration: 0.5s;
z-index:0;
}
.transform6:hover
{
-webkit-transform: rotateZ(360deg) scale(1);
-webkit-transition-duration: 0.5s;
-webkit-box-shadow:0px 0px 7px #000;
z-index:10;
}

.transform7
{
cursor:pointer;
-webkit-transform: rotateZ(12deg) scale(0.5);
-moz-transform: scale(.5);
-webkit-transition-duration: 0.5s;
z-index:0;
}
.transform7:hover
{
-webkit-transform: rotateZ(360deg) scale(1);
-webkit-transition-duration: 0.5s;
-webkit-box-shadow:0px 0px 7px #000;
z-index:10;
}

The HTML Code:

 <div id="div_image" align="left" style="vertical-align:top;">
<div id="div_singleimg" style="left:200px;"><img class="transform2" src="pic1.jpg" /></div>
<div id="div_singleimg" style="left:-40px; top:320px;"><img class="transform5" src="pic2.jpg" /></div>
</div>

<div id="div_image" align="left" style="vertical-align:top;">
<div id="div_singleimg" style="left:280px; top:240px;"><img class="transform3" src="pic1.jpg" /></div>
<div id="div_singleimg" style="left:160px; top:320px;"><img src="pic1.jpg" /></div>
</div>

With this we come to an end of the tutorial. I hope this helps you in making nice photogalleries in future.

Tags: Pure CSS photo gallery, Advanced CSS photo gallery, zoom effect in CSS3, mouse rollover effect in CSS3, Zoom photo gallery, CSS3 rollover gallery effects, code zoom image html, photo zoom html, Cool and smart CSS photo gallery and no queries involved

 

Bookmark and Share
HI, AM JAY, AND I IMAJINE
I am a freelance web designer and web application developer with over 7 years of result oriented experience. I am accustomed to working in a dynamic and goal oriented client environment. My strengths include the ability to visualize, personalize and create a truly unique and enthralling web presence. My passion apart from web design, logo design, Flash animation / actionscripting, CMS Customization, print and web development includes photography, game programming, tutorial development (includes Adobe Flash, Adobe Fireworks and Adobe Photoshop) and blogging.
Read more about me...
CONTACT US
Name :  
Email Address :  
 
Comments :
 
jayanthi.varma@imajine.in  |  © 2008 - 2012 Imajine.