THUMBNAIL ZOOM

Jesus came into the world to give salvation to sinners (I Timothy 1:15) We are sinners who need salvation. Click for Question and Answer. CLOSE !

Put your mouse on one of the thumbnail. Try anoher. It's nice, isn't it ?

• 
• 
• 
• 
• 
• 

The steps to create the effect are as follows:

1. Copy the code below

ul.thumb {

float: left;

list-style: none;

margin: 0; padding: 10px;

width: 360px;

}

ul.thumb li {

margin: 0; padding: 5px;

float: left;

position: relative; /* Set the absolute positioning base coordinate */

width: 110px;

height: 110px;

}

ul.thumb li img {

width: 100px; height: 100px; /* Set the small thumbnail size */

-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */

border: 1px solid #ddd;

padding: 5px;

background: #f0f0f0;

position: absolute;

left: 0; top: 0;

}

ul.thumb li img.hover {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM2N9lZeHR71hgCio2cOTurRa9u65FrQn_OTCp70h9GLhI_jcrx2cQzgD9glX4YD4Pbjnp47VKGiGXWd6HJzk78NS_r7-d9VZOUiQnTtvrfSp9OEphHjfuIFO4fdtelKT1tPNrUjWsJ5e2/) no-repeat center center; /* Image used as background on hover effect

border: none; /* Get rid of border on hover */

}

2. Paste before this code ]]></b:skin>

3. Copy the next code

<br /> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"> <script type='text/javascript'> $(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); }); //Swap Image on Click $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); return false; }); }); </script><br />

4. Paste before </head>

5. Save

6. Use this code in posting

<br /> <ul class="thumb"><li><a href="#"><img src="IMG 1" alt="" /></a></li> <li><a href="#"><img src="IMG 2" alt="" /></a></li> <li><a href="#"><img src="IMG 3" alt="" /></a></li> <li><a href="#"><img src="IMG 4" alt="" /></a></li> <li><a href="#"><img src="IMG 5" alt="" /></a></li> </ul><br /> <br /> <span style="font-size:4px;"><a href="http://bloggerplugnplay.blogspot.com/" target="_blank">Plug it</a></span><br />

LIFE INFO

The Sacrificial Lamb

Jesus was the Lamb of God.
Why did He have to suffer?
What did His suffering accomplish?


Get the answer for free, simply click here