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... :)
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
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... :)
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
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
1
2
3
4
5
6
7
8
9
10
11
12
| .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;} |
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.
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
1
2
3
4
5
6
7
8
9
10
11
12
| .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;} |
Your views and opinions
How is the effect working on your blog ? I guess its great but if you are having any difficulties in applying this effect at any point contact us by drop your comments. :)
Post a Comment