As Simple As It Gets CSS Popup Image!
As the title implies, this CSS Popup Image has the smallest amount of code, in order to do the job at hand, that you will find anywhere on the web. In fact, I encourage you to try and find smaller! Actually, I challenge you to try and make it any smaller! Of course, in doing so, it needs to show and work identical in all browsers just like my code does. Oops... sorry just being competitve, I can't help it. Alright, back to business! I like clean and tidy code - and that's what I built here - BAM!
Here is a working example.
The CSS
#thumbwrap {
position:relative;
margin:75px auto;
width:252px; height:252px;
}
.thumb img {
border:1px solid #000;
margin:3px;
float:left;
}
.thumb span {
position:absolute;
visibility:hidden;
}
.thumb:hover, .thumb:hover span {
visibility:visible;
top:0; left:250px;
z-index:1;
}
The html
<div id="thumbwrap"> <a class="thumb" href="#"><img src="images/jamie1.jpg" alt=""><span><img src="images/jamie1big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie2.jpg" alt=""><span><img src="images/jamie2big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie1.jpg" alt=""><span><img src="images/jamie1big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie2.jpg" alt=""><span><img src="images/jamie2big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie1.jpg" alt=""><span><img src="images/jamie1big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie2.jpg" alt=""><span><img src="images/jamie2big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie1.jpg" alt=""><span><img src="images/jamie1big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie2.jpg" alt=""><span><img src="images/jamie2big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie1.jpg" alt=""><span><img src="images/jamie1big.jpg" alt=""></span></a> </div>
This one is essentially the same, but it positions the larger image over top of the thumbs. The code needed for this effect is a "little" larger than the one above.
Here is a working example.
The CSS
#thumbwrap {
margin:75px auto;
width:252px; height:252px;
}
.thumb {
float:left; /* must be floated for same cross browser position of larger image */
position:relative;
margin:3px;
}
.thumb img {
border:1px solid #000;
vertical-align:bottom;
}
.thumb:hover {
border:0; /* IE6 needs this to show large image */
z-index:1;
}
.thumb span {
position:absolute;
visibility:hidden;
}
.thumb:hover span {
visibility:visible;
top:37px; left:37px;
}
The html
<div id="thumbwrap"> <a class="thumb" href="#"><img src="images/jamie1.jpg" alt=""><span><img src="images/jamie1big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie2.jpg" alt=""><span><img src="images/jamie2big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie1.jpg" alt=""><span><img src="images/jamie1big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie2.jpg" alt=""><span><img src="images/jamie2big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie1.jpg" alt=""><span><img src="images/jamie1big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie2.jpg" alt=""><span><img src="images/jamie2big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie1.jpg" alt=""><span><img src="images/jamie1big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie2.jpg" alt=""><span><img src="images/jamie2big.jpg" alt=""></span></a> <a class="thumb" href="#"><img src="images/jamie1.jpg" alt=""><span><img src="images/jamie1big.jpg" alt=""></span></a> </div>
