Image zoom and pan effect using CSS and HTML

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest
zoom-and-pan-effect

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.

VIEW DEMO

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