Create Popup Image Viewer Using CSS in Blogger

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.

comments

3 Responses to "Create Popup Image Viewer Using CSS in Blogger"

Jhon Doe said... February 23, 2009 at 2:41 AM i will try...
Anonymous said... December 23, 2009 at 8:25 PM Great stuff! But im trying to make this work on my link bar at the top of my page is there a way to get it to work as a widget instead of on your posts.
Vittoria said...
March 22, 2012 at 2:03 PM
How to create popup about author see this page http://businessfinancepost.blogspot.com/2012/02/credit-repair-solutions-to-correct-your.html

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

We have been moved to http://www.bloganol.com/