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 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.
Your comments and suggestions are always welcome. Please drop it at our comment box below.
Peace! #: )
About the Author:
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
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