Create CSS popup Image Viewer in Blogger

Share

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.

Consider to Subscribe to our RSS feed or Follow us at Twitter or Join our Facebook Fan Page.Enter your Email below to subscribe to our updates via Email.

Similar Posts

• Create Popup Image Viewer Using CSS in Blogger
• CSS Menu Widget with RSS Feed list
• Code for placing stylish 125x125px banner ads on your blogs
• Highlight image hover effect (opacity or borderize)
• CSS Dock Menu

Article by Dinesh Dhakal

Dinesh has written 310 awesome articles for us. Dinesh Dhakal(Deineshd) is the Admin of this blog.He is from Kathmandu, Nepal who is blogging since complete 4 years.You can catch him on twitter at Twitter.com/deineshd and in Facebook at Facebook.com/deineshd.