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.

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! #: )