Create Popup Image Viewer Using CSS in Blogger

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Previously we already written a post about Creating CSS popup Image viewer in blogger.This is just the upgraded form of that post.We have make some good changes in that post.If you Like to see the demo then click here.

To setup popup Image viewer in your blog First of all copy the following CSS Code and paste it between <head> and </head> Tags of your Template.

<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: #ffffff;padding: 5px;left: -1000px;border: 1px solid #000;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: 263px;left:282px; /*position where enlarged image should offset horizontally */

}

</style>

Second step is to paste the following Code into your blog Posts.

<a class="thumbnail" href="#"><img src="http://www.t2tibet.com/Images/mount-everest.jpg"border="0" height="66" width="100" /><span><img src="http://www.t2tibet.com/Images/mount-everest.jpg" /></span></a>

Replace the Image Url above with your image Url and see your work done.

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.