creating popup image viewer in css

Easy and simple way to create popup in css, let’s create popup for an image. Click here for demo.

Css Code

<style type=”text/css”>
.spiderpic{
position: relative;
z-index: 0;
}

.spiderpic:hover{
background-color: transparent;
z-index: 50;
}

.spiderpic span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
}

.spiderpic span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.spiderpic:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

HTML code

<a class=”spiderpic” href=”http://webdesigninfo.wordpress.com”><img src=”http://a.wordpress.com/avatar/settysantu-48.jpg?1180110315″ width=”48px” height=”48px” border=”0″ /><span><img src=”http://www.stumbleupon.com/mainpics/2725502.jpg” /></span></a>

Browser Support: it works in all browsers.

Download this file

---

Possibly related posts: (automatically generated)

• Very usefull CSS Stuff
• 08 ARD 214 A Digital Portfolio