sometimes size of images in our web page are limited by area of post, however if we make pop up image tricks maybe agood idea, when we mouse hover small image, big image will be shown, see above for example.
Then follow my instructions step - by step:
1. Prepare 2 different size of your image, 100x60 px, and 400x255 px, or according on what your image sizes.
2. Put on this code between <head>......</head> to Template Design
<style type='text/css'> .thumbnail{ position:relative; z-index: 40; } .thumbnail:hover{ background-color: transparent; z-index: 250; } .thumbnail span{ position: absolute; visibility: hidden; } .thumbnail span img{ border:1px solid gray; border-width:1px; } .thumbnail:hover span{ visibility: visible; top:-50px; left:100px; } </style> |
3. Then place below code to your posting area, for example.
<a class="thumbnail" href="#"> <img src="http://i1046.photobucket.com/albums/b462/agusjokop2002/sunset.jpg" border="0" alt=" photo sunset.jpg"/> " width="100px" height="66px" border="0" /> <span> <img src="http://i1046.photobucket.com/albums/b462/agusjokop2002/sunset-big.jpg" border="0" alt=" photo sunset-big.jpg"/></span> </a> |
No comments:
Post a Comment