Creating popup windows when dragging the image

After a stroll around the blog of the pro, VnTim ™ accidentally read this procedure FanDung the blog, although this is only a few lines of CSS is simple but the pictures are very or popup. Rất cám ơn FanDung về thủ thuật này. Many thanks FanDung about this procedure.

CSS is the code with a few we can create a popup window to display a professional image without javascript. CSS is the code with a few we can create a popup window to display a professional image without javascript. Procedure allows the display of the original image when the popup window is dragging on. Procedure allows the display of the original image when the popup window is dragging on.


See live demo here: http://fandung.110mb.com/test/popup-images-view.html


To do this, you first insert CSS into the code before the closing </ head> in the code template:
- Login blog
- The layout
- The edit HMTL code
- Insert the CSS code below into the first line of code </ head>


<style type='text/css'> <style type='text/css'>

.img-thumbnail{ . img-thumbnail (
position: relative; position: relative;
z-index: 0; z-index: 0;
} )

.img-thumbnail:hover{ . img-thumbnail: hover (
background-color: transparent; background-color: transparent;
z-index: 50; z-index: 50;
} )

.img-thumbnail span{ . img-thumbnail span (
position: absolute; position: absolute;
background-color: #ffffff; background-color: # ffffff;
padding: 5px; padding: 5px;
left: -1000px; left:-1000px;
border: 1px solid #000; border: 1px solid # 000;
visibility: hidden; visibility: hidden;
color: black; color: black;
text-decoration: none; text-decoration: none;
} )

.img-thumbnail span img{ . img-thumbnail span img (
border-width: 0; border-width: 0;
padding: 2px; padding: 2px;
} )

.img-thumbnail:hover span{ . img-thumbnail: hover span (
visibility: visible; visibility: visible;
top: -100px; top:-100px;
left:100px; left: 100px;
} )

</style> </ style>

- The red code is located in the popup will appear on your blog. Adjust these two values to get the most appropriate location on your blog.

- Save template.

And finally the second HTML code:

<a class="img-thumbnail" href="#">
<img src="link ảnh1" border="0" height="98" width="130"/>
<span>
<img src="link ảnh1"/>
</span>
</a>