>Enable arbitrary links or image thumbnails to pop up an enlarged (different) image onMouseover by using this CSS code. With the help of CSS’s “:hover” pseudo class, combined with relative and absolute positioning, the enlarged images are simply included on the page as normal HTML, “popping” up on demand. CSS is behaving more and more like scripting!
For Demo you can visit this blog in my portfolio.
<style type=”text/css”>
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */.thumbnail{
position: relative;
z-index: 0;
}.thumbnail:hover{
background-color: transparent;
z-index: 50;
}.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */}
</style>
<a class=”thumbnail” href=”#thumb”><img src=”media/tree_thumb.jpg” width=”100px” height=”66px” border=”0″ /><span><img src=”media/tree.jpg” /><br />Simply beautiful.</span></a>
<a class=”thumbnail” href=”#thumb”><img src=”media/ocean_thumb.jpg” width=”100px” height=”66px” border=”0″ /><span><img src=”media/ocean.jpg” /><br />So real, it’s unreal. Or is it?</span></a>
<br />
<br /><a class=”thumbnail” href=”#thumb”>Dynamic Drive<span><img src=”media/dynamicdrive.gif” /><br />Dynamic Drive</span></a><br />
<a class=”thumbnail” href=”#thumb”>Zoka Coffee<span><img src=”media/zoka.gif” /><br />Zoka Coffee</span></a>