As Simple As It Gets CSS Popup Image Tutorial
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.
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>
