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

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.

comments

7 Responses to "Create CSS popup Image Viewer in Blogger"
Lux said...
June 13, 2008 at 3:40 AM

This does not seems to work with Blogger. Can you please show some working demo you have tried with. I think # in #thumb is getting replaced with some value from blogger.

Please let me know if you have any thoughts on how to overcome this.


Deinesh said...
June 13, 2008 at 7:54 PM

@lux

yes it works with blogger you can see the demo in this page.

I have experimented this in this blog it works sure.


Helen M. Bascom said...
June 29, 2008 at 7:14 PM

This works beautifully. Thank you thank you thank you!


LiveScore99.com said...
September 3, 2008 at 1:15 PM

Yes, it works for blogger, BUT

"position where enlarged image should offset horizontally"

I can not view "full" pics since it block by the sidebar.... help me..

email me: Jayeason@gmail.com

Thanks!


chris said...
September 15, 2008 at 12:25 AM

is there a way to make this work in myspace?
if so, how?
thanks

email me: sktilez@yahoo.com


Anonymous said...
June 4, 2009 at 10:57 AM

Is there a way to make this work with an image map instead of an image URL? Please help!


Anonymous said...
June 4, 2009 at 10:58 AM

Is there a way to make this work with an image map instead of an image URL? Please help! thanks!


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!