Hey! Welcome to my site. Images play a very important role in changing the appearance of your blog. Users like blogs that have images. An image can tell many things which you can’t express in your words. So, today I have brought some cool image hover effects for the Blogger blog. I really like these image hover effects and that’s the reason I am sharing some awesome image hover effects. 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 effect for the blogger.
- If you like a particular effect then copy the CSS below the demo image and click on installing instructions 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 the Blogger blog.
How to Add CSS Image Hover Effect in Blogger?
For the newbies who don’t know how to add CSS image hover effects in blogger here is a 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 the below steps:
- Go to 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 cool effects on your image. If yes I have many effects for you. You will like each effect. I have added some descriptions of each image’s hover effect to make you familiar with each effect. If you like it then 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 then click on Installing instruction to know how to add that effect to blogger.
Opacity
This is a pretty cool effect. Most bloggers like to use this hover effect. It will change the opacity of the image on the mouse hover. Below is the CSS for this effect. To know the adding instruction of this effect click on Installing Instruction below CSS code. In the meantime hover your mouse on the 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 then this CSS code will produce a reflection of that image. Only WebKit supported browsers 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 code to make this effect. Again this will work on Webkit browsers. Now see the CSS below the 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 over your blogger image then 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 a black & white image. When the user will hover on the image of your blogger blog then it will turn black & white. The CSS code for this image hover effect for bloggers 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 the image. And when the user will hover over the image then 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 rotate with a little zoom effect. To make it more beautiful I have added a 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 then copy the CSS code given below this image and click on installing instructions 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 a mixture of rotate and spin effects. To make it more beautiful I have added some background color when hovered on the 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 then copy the CSS code below and add to the 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 then feel free to ask me.
