How To Create Popup Image viewers For Your Blogger Blog simple using CSS

Now a days some bloggers want to display image in full size or enlarge in their blog. But it no critical,very simple, just add the following CSS code given below in your blogs template and enjoy.

STEP ONE:->>

Now You can eassy way To setup Popup Image Viewer in your Blogger Blog.

Now Go to Templates> Edit your Html Then copy the following all code and Pest the CSS Code between your <head> </head> section.

<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 */
}