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.See the follow us menu at the right top of my blog for sample images of zoom and pan hover effect.
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.
- .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;
- }
- <div class="grow pic">
- <img src="......."></img>
- </div>
WITHOUT FRAMES:
Sometimes the frame may not match your requirements you may remove it and use the zoom effect alone by modifying the code like this.
Change the ".grow img" in the line 1 of the zoom and pan code to "img.grow" in the code and in html remove the <div> tag and add the class name grow in the <img> tag.your modified code should look like this way.This code will expand your image and occupies more space than the previous one and it also sometimes disturbs other elements.
- 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;
- }
HTML PART:
- <img class="grow" src=".......">
- </img>
- 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 i wont disturb other elements.
- More hover effects codes are yet to be published, visit again.
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.
Clik here to view.![]()
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Clik here to view.
