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"
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
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
To experience lens hover effect hover over below image
 |
.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%;
}
-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
To experience opacity effect hover through below image
.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.
To experience tilt effect hover through below 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);
.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.
As the name itself tell blur effect will occur when you hover over it.
To experience Blur effect hover through below image.
.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.
Read this: How to add navigation bar to your blog