Hi!
Is there a way (with CSS) to have a clickable link when a div is
displayed on top of it? My goal is to display information (text) of the
image on hover state. And on click, have the image display larger on
lightbox.
Example can be found here: http://turbolihis.kapsi.fi/test/
HTML:
<ul class="gallery">
<li>
<ul class="info">
<li><h3>Image</h3></li>
<li><p>Aperture: f/5.6</p></li>
<li><p>Shutterspeed: 1/100s</p></li>
<li><p>ISO: 400</p></li>
<li><p>Focal: 271 mm </p></li>
</ul>
<a href="images/gallery/800/thumb2.jpg" class="lightbox">
<img src="images/gallery/160/thumb2.png" alt="image" width="160"
height="160" />
</a>
</li>
</ul>
CSS:
.gallery > li {
border: 1px solid #000;
margin: 0 0 60px 35px;
position: relative;
}
.gallery .info,
.gallery a {
height: 160px;
width: 160px;
}
.gallery a {
border: 1px solid #fff;
display: block;
}
.gallery .info {
background: url(../images/layout/icy_top_160.png) no-repeat top left;
display: none;
margin: 1px;
position: absolute;
}
.gallery li:hover .info{ display: block; }
.gallery .info p,
.gallery .info h3 {
margin: 10px 0 5px;
padding: 0 20px;
}
.gallery .info p { margin-top: 0; }
Regards,
Ville
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
