1.Login to your blogger dashboard–> layout- -> Edit HTML 2.Don’t Click on “Expand Widget Templates” 3.Scroll downbound to where you wager ]]></b:skin> tag: 4.Copy beneath cipher and adhesive it meet before the ]]></b:skin> tag. 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 unconditional orientating humble number */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the diminutive thumbnail filler */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ border: 1px solidified #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:url( http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png ) no-repeat edifice center; /* Image utilised as scenery on waver gist border: none; /* Get disembarrass of abut on waver */ } Note : Please patron ‘ thumb_bg.png ‘ ikon yourself. 5.Scroll downbound to where you wager </head> tag: 6.Copy beneath cipher and adhesive it meet before the </head> tag.
Read the original:
How To Add jQuery Thumbnail Hover/Zoom Effect to blogger images