How to add CSS image hover effect in blogger

How to add CSS image hover effect in blogger

For the newbies who don't know how to add CSS image hover effect in blogge 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.
and you done!

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;
}