Add Image Hover Effect In Blogger

Image hover effect gives a pretty look to your blog. Just by adding these simple CSS codes you can add hover effect in your blog. Lets just begin.

Login to Blogger
Go to

Template > Customise > Advanced > Add CSS

And Paste any of the code of your choice from here.

Opacity Effect

This effect lets you change opacity level of your images on blog.

/* Opacity effect by Tutes Inside */
.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 Effect

Zoom out effect zooms out images on mouse hover.

/* Zoom out effect by Tutes Inside */
.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 Effect

Give unique reflection effect to your blogger images.

/* Reflection effect by Tutes Inside */
.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

Another hover effect for your blog that tilt images on mouse hover.

/* Tilt effect by Tutes Inside */
.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

Blur your blog images on mouse hover.

/* Blur effect by Tutes Inside */
.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

Spin your blog images with this cool effect.

/* Spin effect by Tutes Inside */
.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 Effect

This effect will turn your blog images into black and white images on mouse hover.

/* Greyscale effect by Tutes Inside */
.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 Effect

Brighten your images on mouse hover in blog.

/* Brightness effect by Tutes Inside */
.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%);
}

Tutes Inside