Questions

Related Posts

Cool Photo Gallery Using CSS

Here's a cool css photo effect. It shows an accordion effect; once you hover over an image it expands to full size.



CSS:

#gallery {
padding:0;
margin:0;
list-style-type:none;
overflow:hidden;
width:320px;
height:425px;
border:1px solid #888;
background:#fff url(windows/win_back.gif);
}
#gallery li {
float:left;
}
#gallery li a {
display:block;
height:30px;
width:320px;
float:left;
text-decoration:none;
border-bottom:1px solid #fff;
cursor:default;
}
#gallery li a img {
width:320px;
height:30px;
border:0;
}
#gallery li a:hover {
background:#eee;
height:239px;
}
#gallery li a:hover img {
height:239px;
}

XHTML:


You can do this horizontally or vertically and add as many images as you want just make sure that the images are of the same size and extension.

Your Answers

Your Name:
Your Answers :
<> is a code tag
Preview
Enter the verification code:

Answers

manojdamkondwar
Jan 06 12 06:09:13		 #gallery {

padding:0;

margin:0;

list-style-type:none;

overflow:hidden;

width:320px;

height:425px;

border:1px solid #888;

background:#fff url(windows/win_back.gif);

}

#gallery li {

float:left;

}

#gallery li a {

display:block;

height:30px;

width:320px;

float:left;

text-decoration:none;

border-bottom:1px solid #fff;

cursor:default;

}

#gallery li a img {

width:320px;

height:30px;

border:0;

}

#gallery li a:hover {

background:#eee;

height:239px;

}

#gallery li a:hover img {

height:239px;

}

Johnette
Sep 10 11 08:36:47		 God, I feel like I shloud be takin notes! Great work