Popup an Image
In this article I am going to tell how it easy to popup an image using CSS on mouseover. For popup an image you should not require to use a jquery library file. CSS make its pretty to popup an image and look stylish with better layout. In this tutorial we are using simple html div and span. With the CSS layout make popup on image using mouse over. Let us see in detail below . Have a look.
HTML
<div class="thumbnail" href="#thumb"><img src="vik.jpg" width="100px" height="66px" border="0" /> <span><img src="vik.jpg" /><br />Vikash</span> </div>
Basically the main importance for popup an image depends on CSS. CSS layout is set different for mouse over and that is why when we hover mouse on image popup open for respective image. Here we are displaying main image on mouseover.
CSS
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
/* CSS for enlarged image */
.thumbnail span{
position: absolute;
background-color:#d7d7d7;
padding: 5px;
left: -50px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
/*CSS for popup image*/
.thumbnail span img{
border-width: 0;
padding: 2px;
}
/*CSS for popup image on mousehover*/
.thumbnail:hover span{
visibility: visible;
top: 0;
left: -1px;
width:360px;
z-index:999;
box-shadow: 0 2px 35px rgba(0,0,0,0.4);
border: 1px solid #d7d7d7;
}