Thursday, 26 January 2017

Top CSS Image Hover Effect For Blogspot Bloggers

Posted by Mohammed Rafi

Image Hover Effects For Blogspot Bloggers

"Looking for top image hover effects for your blogs?.here are  the top image hover effects you should use in your blog"

top hover for blogspot bloggers

Image Hover Effects

Hover effects mean the change which occurs when you mouse over them.Image hover means changes in images will occur when you mouse over them.

We already know the importance of images in blogs.Images speak a thousand words.so, we should be very careful while handling them.A good editing alone is not enough, we should use it in a correct way and correct manner.

Hover effects will add a professional look to your blog.it makes your posts more beautiful.

Read this:welcome readers to blogspot builder

 How to apply CSS image hover effects to your blog

  • Go to blogger dashboard
  • Go to template and Click Edit HTML
  • Find  ]]></b:skin> or simply </b:skin>
  • Place the below code above it


  Lens CSS image hover effects

This is the best CSS image hover effects.It is suitable for travel bloggers.

When you hover over the image a black colored lens like structured focus the image.You can change the lens color by changing CSS color code.

To experience lens hover effect hover over below image


focus CSS effect


.post-body 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-body img:hover{
border: 70px solid #000;
border-radius: 50%;
}




Opacity image hover effects

Opacity is the best and professional image hover effects.Most of the top blogs use this image hover effect.I use this effects in my blogs.

Out of all these effects we see here opacity is the best.Mostly I prefer this to many of my friends

whenever you hover over the image opacity will increase

To experience opacity effect hover through below image


opacity CSS image hover

.post-body 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-body img:hover{
opacity:0.7;
filter:alpha(opacity=50);
}




Tilt CSS image hover effect 

Tilt is the basic and simple image hover effect.when you hover over the image will tilt slightly.

To experience tilt effect hover through below image.


tilt CSS image

.post-body 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-body img:hover{
 -webkit-transition: rotate(-10deg);
-moz-transition: rotate(-10deg);
-o-transition: rotate(-10deg);
-ms-transition: rotate(-10deg);
transform: rotate(-10deg);
}




Blur CSS image hover effects

Blur CSS image hover effects is well-known image hover effects.

As the name itself tell blur effect will occur when you hover over it.

To experience Blur effect hover through below image.


BLUR CSS


.post-body 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-body img:hover{
-webkit-filter: blur(5px);
}



Conclusion

This Post will help you to add CSS image hover effects to your blog.Please share your experience with this hover effects in comment section.If any problem persists let us know, we are ready to help you.subscribe our blog for further updates.