![[feature] Easy Image Hover Effects For Blogger - Shout4Education](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_-j5UVX5Ou8skGP84lvYVFFp2b-Dhp0yoi3LYfoDMffUAV03DnMaIPDDWTj1_6222IsEmghpDldFu_8TAa_HE2XRXd7AZJYYU8lJwd4RroMqQlImKhwyavscxadNSwx89dqtnJFDj3Q4/s1600/hover_effect_for_bloger_shout4education.jpg "[feature] Easy Image Hover Effects For Blogger - Shout4Education")
Hey users! Welcome to my site. Images plays a very important role in changing the appearance of your blog. Users like the blogs which has images. An image can tell many thing which you can't express in your words. So, today I have brought some cool image hover effects for Blogger blog. I really like these image hover effects and that's the reason I am sharing some awesome image hover effect. You should have to go through these. These will make your blogs' image more beautiful. I have included 9 image effects which you can use in your Blogger blog.
Instructions
- I have added CSS of each image hover effects for blogger.
- If you like a particular effect than copy the CSS below demo image and click on installing instruction to know the very easy way to add that effect in your Blogger blog.
- Installing instruction is given at bottom of this post.
Now we are ready to see some beautiful image hover effects for Blogger blog.
How to add CSS image hover effect in blogger
For the newbies who don't know how to add CSS image hover effect in blogger here is small guide for them so they can also become able to add css image hover effects to their blogger blogs. To add CSS image hover effect in blogger follow below steps:
- Goto blogger dashboard
- goto Template >> edit html
- Search for ]]></b:skin> tag ( quick tip: to search easily press ctrl+f )
- Just above ]]></b:skin> paste one of the below CSS image hover effect code.
- Done!
Image Hover Effects For Blogger
So you want a cool effects on your image. If yes I have many effects for you. You will like each effects. I have added some description on each image hover effects to make you familiar about each effects. If you like it than feel free to copy it for your personal use. It is very simple to install these on Blogger. Just copy the CSS code of the image effect you like and than click on Installing instruction to know how to add that effect to blogger.
Opacity
This is a pretty cool effect. Most bloggers likes to use this hover effect. It will change the opacity of the image on mouse hover. Below is the CSS for this effect. To know the adding instruction of this effect click on Installing Instruction below CSS code. At the mean time hover your mouse on image below to see how this hover effect will look.
.post img{-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.post img:hover {opacity:0.7;filter:alpha(opacity=50);}
Zoom Out on Hover
By using this effect the image will be zoom out on hover. It will not effect your blog width. And I have slow down the zoom process to make it more beautiful. Here is the CSS.
.post img{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}.post img:hover {-o-transition: all 0.6s;-moz-transition: all 0.6s;-webkit-transition: all 0.6s;-moz-transform: scale(1.4);-o-transform: scale(1.4);-webkit-transform: scale(1.4);}
Reflection on Image Hover
Whenever the mouse will be hovered on the image than this CSS code will produce a reflection of that image. Only webkit supported browser will be able to show this effect. Let's see the CSS code for this image hover effect for Blogger.
.post img{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;}.post img:hover {opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8);}
Tilt Effect
This is really simple. We are going to rotate the image slightly when users will hover on this image. You will like this hover effect. Now the time to see the CSS code. Css code is for this is gven below image.
.post img{-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}.post img:hover {-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-o-transform: rotate(-10deg);-ms-transform: rotate(-10deg);transform: rotate(-10deg);}
Blur Effect for Blogger
It is also quite simple. We will only need a few lines of codes to make this effect. Again this will work on Webkit browsers. Now see the CSS below demo image.
.post img{-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.post img:hover {-webkit-filter: blur(5px);}
Spin Effect
Whenever the user will hover on your blogger image than the image will start to spin. This is really crazy. The image will change from square to circle. See the demo below.
.post img{-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}.post img:hover {border-radius: 50%;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}
GreyScale
It will be like black & white image. When user will hover on the image of your blogger blog than it will turn black & white. The CSS code for this image hover effect for blogger is given below. Now see the demo and CSS.
.post img{-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.post img:hover {-webkit-filter: grayscale(100%);}
Brightness
To make this effect I have changed the brightness of image. And when the user will hover on the image than the image will become more bright. See the CSS below. You know what you have to do.
.post img{-webkit-filter: brightness(60%);-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.post img:hover {-webkit-filter: brightness(100%);}
Rotate Image 360 deg. On Hover
This is really cool effect. It will make your image to rotate with little zoom effect. To make it more beautiful I have added little shadow on hover. It will completely change your image appearance on hover. Give it a try or see the demo of this image below. If you like it than copy the CSS code given below this image and click on installing instruction to know how to add this hover effect on blogger.
.post img {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.post img:hover {-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;transition: all 0.5s ease;padding: 4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
Rotate and Spin Effect
Here is another effect for images which is mixture of rotate and spin effect. To make it more beautiful I have added some background color when hovered on image. To see the demo of this effect just hover your mouse on the images of recent posts. Alternatively you can see the Demo of this image hover effect for Blogger in the image given below. And if you like this image hover effect than copy the CSS code below and add to your CSS area of your Template by following the steps given below the CSS.
.post img:hover {opacity: 1;-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;-moz-box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;box-shadow: 0 0 20px #292832, inset 0 0 20px #292832;webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; rgba(0, 0, 0, .4);-o-transition: all 0.8s ease-out;-webkit-transition: all 0.8s ease-out;-ms-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
These were the 8 cool and interesting image hover effects for Blogger. I will keep updating with the latest effects. Hope you find your desired effect for your blog or site. If you face any problem than feel free to ask me.
Comments