Create CSS popup Image Viewer in Blogger

The image is small in the webpage but seen bigger when you hower the image.Isn't it interesting?Yes.Bloganol brings you the greatest image hack.This popup image viewer is good for those blogger who like to place more images in their blog posts but wants less area to be occupied and wants image seen clear.

Demo: Hover the following thumbnail Images with your Mouse Pointer.If it doesn't work then visit this demo page link.


Simply beautiful.
So real, it's unreal. Or is it?
Installation of this widget is not so hard. First of all copy the following CSS code to the head section of your blog.

<style type="text/css">

.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>

And the second and Last step is to copy the following html codes and paste it to your blog either while posting or in your sidebar adding a new page Element.

<a class="thumbnail" href="#thumb"><img src="Image Url" width="100px" height="66px" border="0" /><span><img src="Image Url" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="Image Url" width="100px" height="66px" border="0" /><span><img src="Image Url" /><br />So real, it's unreal. Or is it?</span></a>

In the above code replace Image Url with your Image Url .

If you got any problem , not satisfied or liked this post then please leave a comment on this post.