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
CSS3 accordion photo gallery

We can use CSS to create accordion photo galleries. Here is an example for horizontal accordion photo gallery. Please click on the images to view the photo gallery in Google Chrome browser.

 

Steps followed to create the above gallery that slides horizontally, are given below.

1. We assign a main div which holds all the images.

#gallery {
padding:5px;
margin:0;
overflow:hidden;
width:440px;
height:239px;
border:1px solid #888;
}

The above height and width parameters would depend on the size of our images.

2. Second, we place a container inside it to give a background image

#div_container
{
width:440px;
height:239px;
background-image:url(horizontal_sliding_cover.jpg);
background-repeat:no-repeat;
background-position:right;
}

Note: This step is optional, to enhance the look of our gallery.

3. Thirdly, we assign separate divs to our images, as given in the style below

#div_img
{
display:block;
height:249px;
width:30px;
float:left;
border-bottom:1px solid #fff;
-webkit-transition:0.5s;
}

In the above style, we have compressed our images in width, to 30 pixels. Also, the '-webkit-transition' property is used for the gradual transition of images from compressed to their actual size.

4. In this step, we assign the hover effect to our image container, wherein we expand it in width, to the actual size of our image. In this case, the actual width of the image is 320 pixels

#div_img:hover {
background:#eee;
width:320px;
}

4. Next, we assign style to the images, and give the hover effect

.img {
width:30px;
height:239px;
border:0;
-webkit-transition:0.5s;
}

.img:hover {
width:320px;
}

As obvious, in this step the image would be compressed before hovering .On hovering , it would retain actual size.

The HTML code for the above styles given is shown below

<div id="gallery">
<div id="div_container">
<div id="div_img"><a href="#"><img src="horizontal_sliding_gal1.jpg" border="0" class="img" /></a></div>
<div id="div_img"><a href="#"><img src="horizontal_sliding_gal2.jpg" border="0" class="img" /></a></div>
<div id="div_img"><a href="#"><img src="horizontal_sliding_gal3.jpg" border="0" class="img" /></a></div>
<div id="div_img"><a href="#"><img src="horizontal_sliding_gal4.jpg" border="0" class="img" /></a></div>
<div id="div_img"><a href="#"><img src="horizontal_sliding_gal5.jpg" border="0" class="img" /></a></div>
</div>
</div>

With this we come to an end of this tutorial. You can also try out creating vertical sliding gallery. For that too, same logic can be used, with the only difference that our images would be compressed in height instead of width. The example for the same is shown below.


Tags: CSS3 photo gallery, CSS3 accordion photo gallery, CSS3 horizontal accordion photo gallery, CSS3 vertical accordion photo gallery

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.