Picnic Website Code Tutorials

As Simple As It Gets CSS Popup Image Tutorial

View Demo

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>
		

View Demo

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>
		

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine