Today we are about to see codes of some sizzling image hover effects using simple HTML and CSS.Image hover effects in your site will help you to gain the attention of your visitors easily to any important images or banner in your sites.But its not wise to use the effect in all the images in your site so better use these codes wise and precise.
CSS CODES:
FRAME AROUND YOUR IMAGE:
The below CSS code will add frame around your image and limit your image effects within the frame and does not disturb the elements near it.
<style type="text/css">
.pic{
border: 10px solid #fff;
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
</style>
<div class="pic">
<img src="htttp:........."></img>
This code will zoom the image when you bring the mouse over it giving a beautiful hover effect of that image.
ZOOM AND PAN:
.grow img{
height:300px;
width:300px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
-ms-transition:all 1s ease;
transition:all 1s ease;
}
.grow img:hover{
width:400px;
height:400px;
}
Sometimes the frame may not match your requirements you may remove it and use the zoom effect alone.
WITHOUT FRAMES:
img.grow{
height:300px;
width:300px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
img.grow:hover {
width:400px;
height:400px;
}
NOTE:
- You can modify the width of the image based on the requirements in the CSS.
- You can add link to your image by enclosing the image tag within the <a> tag.
- These two types have their unique purpose so use it in the way in your blog so that it wont disturb other elements.
Related Posts:
