How to Add Hover Effect to Images in Posts

Hi guys!, Today, I will share you  a simple trick on how to add hover effect to all blog images by  adding/putting only a simple css to your template. I know images will add life to your posts and help your article to rank more in search engine result page. And to be more professional, we will add a soft touch on it.
Have your mouse cursor touch the image below for the live demo.
add hover effect on post images

Also Read:
How to Add Different Hover Effects on Blogger Images
How to Put Alt Tag In Blogger Images-Increase Traffic

Putting Hover Effect To All Post Images


Step 1. Go to your Blogger Dashboard >> Template >> Edit HTML
Step 2. Look or find the code below
]]></b:skin>
Step 3. Just above or after the code above, paste the code below

.post-body img {
opacity:0.7;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
border:5px solid #ddd;
border-radius:10px;
background: #ffffff;
}
.post-body img:hover {
opacity:1.0;
}

Customization (Optional)


  • Change the opacity (0.7) of the image (in no hover effect state).  You can set it as "0" which is completely transparent and "1" is not tranparent.
  • Change the transition speed of the hover effect ( 0.2s). The bigger the value(.5, .6, .7, .8, .9, 1 and so on) the slower it will undergo the hover effect and the lower the value (.4, .3, .2, .1,) the fastest the hover effect is.
  • You can also edit the value of the border which are:
    5px- The bigger the value the bigger is the its border
    solid- There are different border styles  where you can choose here
    #ddd- This the color of your image border. You can select here other (hexadecimal) colors
  • And finally, change the opacity "opacity:1.0" of the opacity  of the post image when the mouse hover is applied on it.
Step 4. Save your template and Congratulations!

Your comments and suggestions are always welcome. Please drop it at our comment box below.
Peace! #: )
About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...