First web design post – Pop up image using pure CSS

First, while this works, I would prefer to use the lightbox javascript instead, but this does the same kind of thing, just not as much eye candy.

When you hover over the image it pops up a larger version of it using styles assigned to the <a></a>tag.

Here is the CSS

a.info{
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#50BFDB;
text-decoration:none
}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
display:block;
font-size:16px;
font-weight:bold;
background-image:url(/images/imagename.jpg);
background-repeat:repeat-x;
background-position:bottom;
position:absolute;
top:-40px; right:180px; width:230px; height:200px;
border:1px solid #B2CB55;
background-color:#fff; color:#50BFDB;
text-align: center;
padding-left:10px;
padding-right:10px;
}

And here is the html:

<div id=”divName”><a class=”info” href=”#”><img alt=”imgAltHere” height=”xxx” src=”images/imageName.jpg” width=”xxx” /><span> </span></a></div>

Leave a Reply