This is an easy trick but an amazing one too, bring the photos in your post to life with this hover effect trick.
You may have seen this on many big websites, these types of hover effects keeps the reader engaged with your blog and if they are getting bored they can simply play with it. If you haven't seen it before then check the demo below
Demo
So, how's it ? You can also do it vice-versa
Don't it look great with this elegant hover effect. The code implementation is easy and you after reading the code specification you can make your own effect out of it. The whole thing we have to add is CSS. So read further to achieve this.
Now refresh your blog with CTRL+F5 and check the effect on your images !
But what if you want it in opposite order ?
Vice-Versa
Then try this CSS, this keeps the image untouched faded and when you hover it you will see it in normal state.
You may have seen this on many big websites, these types of hover effects keeps the reader engaged with your blog and if they are getting bored they can simply play with it. If you haven't seen it before then check the demo below
Demo
So, how's it ? You can also do it vice-versa
Don't it look great with this elegant hover effect. The code implementation is easy and you after reading the code specification you can make your own effect out of it. The whole thing we have to add is CSS. So read further to achieve this.
The CSS for this hover effect
This effect looks like that it must be created with heavy codes but with CSS3 generating this effect is easier than ever. The CSS below is actually for Blogger, but with little edits WordPress users can also use it on their website or blog.post-body img {
opacity:1.0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.post-body img:hover {
opacity:0.7;
}
To add this CSS into your blogger blog : Log into your Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Add the CSS into the custom CSS box and hit Apply to Blog.Now refresh your blog with CTRL+F5 and check the effect on your images !
But what if you want it in opposite order ?
Vice-Versa
Then try this CSS, this keeps the image untouched faded and when you hover it you will see it in normal state.
.post-body img {
opacity:0.7;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.post-body img:hover {
opacity:1.0;
}
The adding procedure is same as above one. Here opacity is the main property creating this effect, so changing it's value may bring some versatility into the effect. You can change it's value from 0.0 to 1.0