WELCOME TO SHARING SHIP. Get Our Post Daily to Your Mobile Click Here



Saturday, 31 March 2012

Pin It

Add Zoom Hover Effect to Image to blogger


1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>

.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

4. Then if you want to active the effect, use this code

<a class="hovergallery" href="http://full-tricks.blogspot.com/" target="_blank">
<img src="http://1.bp.blogspot.com/-ycrEcnVzJAs/TcXGWwcjL3I/AAAAAAAAAYQ/MiQNmK44ZOg/s200/fullblogtricks-blogger-icon.jpg" /></a>

=> Replace the blue code with your link
=> Replace the red code with image URL
5. Finish... Hopefully useful.

Do you Like this story..?

Get Free Email Updates Daily!

Follow us!


Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
Karthikraghunath K

0 comments:

Post a Comment


Web Visitors

SUPPORT US

Followers

 

About The Author

Categories

My Blogger Pedia. Copyright 2008 All Rights Reserved | Contact | about

/*featured start*/ /*featured start*/