Image shrink CSS hover effect

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest

paris-night-sky-wallpaper-hover-effect-css

Hover effects using HTML and CSS have quite an attractive addition to your sit/blog.These 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 choice of images for this effect should be right to make this effect even stunning. As this Image hover effect was completely based on CSS and HTML it won’t affect your site speed performance. 

VIEW DEMO

CODES:

FRAME AROUND YOUR IMAGE: 

CSS code given below will add frame around your image and limit your image effects within the frame and does not disturb the other elements in your webpage.

.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; 
}

SHRINK EFFECT:

CSS code below 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;
                             }

The class “shrink pic” in the <div> tag adds the CSS properties of both Shrink and pic calss there you obtain a image with shrinking effect inside the frame. 

WITHOUT FRAMES:

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.

  1.  To do so replace the first line of the above Shrink effect code “.Shrink img” with “img.Shrink”
  2. Then replace the 10th line “.shrink img:hover” with “img.shrink:hover”
  3. Then all you have to do is remove the <div> tag and define the class “shrink” inside the <img> tag. 
  4. Your <img> tag will looks like this after this modifications
                 <img class=”shrink” src=”…….”></img>
Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest

Related Designs and Schematics

The following two tabs change content below.

Frank Donald

Junior Network Engineer at Tata Communications
Frank Donald is an Electronics and Communication Engineer who is very passionate about his subject. Reading, Surfing and Blogging are the things he loves.

Ask your query

Be the First to Comment!

Notify of
avatar
wpDiscuz