Regardless it looks like you will be using Javascript for part of
this(lightbox/shadowbox)
I do have some other sugestions:
First let's slim down the html
Html:
<ul class="gallery">
<li>
<a href="thumb2.jpg" class="lightbox">
<img src="thumb2.png" alt="image" />
<div class="info">
<h3>Image</h3>
<p>Aperture: f/5.6</p>
<p>Shutterspeed: 1/100s</p>
<p>ISO: 400</p>
<p>Focal: 271 mm </p>
</div>
</a>
</li>
</ul>
You are currently using nested <ul> the over lay doesn't realy lend itself
to list style data.. Maybe <dl> but putting it all in a nice interior div
is cleaner.
All the contents of the <li> are wrapped in an <a> tag (this is HTML5) so
it won't validate but I think it will work in all browsers that will let
you do disjointed rollovers.
CSS:
img {border:none;}
.gallery li, .gallery .info, .gallery li img {
width:160px;
height:160px;
}
.gallery li {
border: 1px solid #000;
margin: 0;
position: relative;
list-style:none;
padding:0;
}
.gallery li a {
text-decoration:none;
color:#000;
}
.gallery .info {
background: url(icy_top_160.png) no-repeat top left;
display: none;
margin: 1px;
position: absolute;
top:-1px;
left:-1px;
}
.gallery li:hover .info {
display: block;
padding:15px;
}
.gallery .info p, .gallery .info h3 {
margin:0px; padding:0px;
}
For the most part CSS doesn¹t change much. I added a couple of style to
make up for the lack of a reset stylesheet, and I removed the child
selector tab. The major change is in positioning. A -1 was given to top
and bottom to make up for the border;
Hope this helps,
--Sarah
http://twitter.com/#!/Sarah_Giles
On 11/15/10 4:08 PM, "Ville Viklund" <ville.vikl...@gmail.com> wrote:
>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/
______________________________________________________________________
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/
