Today we are about to see the codes of some sizzling hover effects using HTML and CSS.The 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.The choosing of images for this effect should be right to make this effect stunning See the Demo effect of image shrinking here.We have added the codes for zooming and panning image at previous post Zoom 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 other elements in your webpage.
SHRINK 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 other elements in your webpage.
- <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="http://......"></img>
- </div>
This code will shrink the image when you hover it.
- .shrink img {
- height: 400px;
- width: 400px;
- -webkit-transition: all 1s ease;
- -moz-transition: all 1s ease;
- -o-transition: all 1s ease;
- -ms-transition: all 1s ease;
- transition: all 1s ease;
- }
- .shrink img:hover {
- width: 300px;
- height: 300px;
- }
- <div class="shrink pic">
- <img src="........"></img>
- </div>
The usage of frames gives many advantages but for those who need their image to shrink and without any frame around the image you can use the following code but be aware that this may disturb the elements near the image.So i suggest to use it with caution.
- To do so replace the first line of the above Shrink effect code ".Shrink img" with "img.Shrink"
- Then replace the 10th line ".shrink img:hover" with "img.shrink:hover"
- Then all you have to do is remove the <div> tag and define the class "shrink" inside the <img> tag.
- Your <img> tag will looks like this after this modifications
<img class="shrink" src="......."></img>
Post your queries and comments on this code.More codes to be added soon keeping visiting our site.
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.
