Simple CSS image Zooming

Recently I’ve see a rise in the effect of an image zooming when the user hovers over it. This movement provides feedback to the user and the added movement should improve engagement.

I had a little look into this and it can be achieved with very few lines of code. An example of the effect is shown below.

How it’s done

The html is structured as follows:

<code>&lt;div id=&quot;bgzoom&quot; style=&quot;width:300px; height:225px;&quot;&gt; 
 &lt;a style=&quot;background-image:url('http://www.htmlstudio.co.uk/wp-content/uploads/2015/03/black-and-white-cat-1395009210V6g.jpg');&quot;&gt;&lt;/a&gt; 
&lt;/div&gt;
</code>

Obviously you could have all of the styles in an external stylesheet but this is often a little impractical when using a CMS and allowing the admin to modify the background images.

The CSS is output as follows :

#bgzoom{
  overflow:hidden;
}
#bgzoom a{
     display:block;
     width:300px;
     height:225px;
     background-repeat:no-repeat;
     background-position:center center;
     background-size:cover;
     -webkit-transition: all 0.5s ;
     transition:all 0.5s;
}
#bgzoom a:hover{
    transform: scale(1.15,1.15); 
    -webkit-transform:scale(1.15,1.15); 
    -moz-transform:scale(1.15,1.15); 
    -ms-transform:scale(1.15,1.15); 
    -o-transform:scale(1.15,1.15);
     -webkit-transition: all 0.5s ;
     transition:all 0.5s;
}

The key element here is the transform function which scales the anchor tag by 115% in the x and y directions. The overflow on the parent tag takes care of any overflow caused by this and creates a nice zoom effect. I have applied a transition to make the whole thing appear smooth.

Leave a Reply

    To the top
    css.php