News

Use CSS3 transforms and transitions to create subtle image zooms

Inspired by guillaumebouvet.com, learn how to add subtle rollover zooms to page images with CSS3 transitions and transforms

Screen-shot-2015-01-12-at-14.47.36

Screen shot 2015-01-12 at 14.47.36

Subtle style effect

This technique relates to a subtle CSS3 trick employed throughout guillaumbouvet.com, particularly within the featured project pages (http://bit.ly/1ExTLqy). It’s in fact an effect used on various modern designs, applying subtle shifting motion to page images on rollover. In this instance a zoom is added purely with transitions and transforms. It’s incredibly simple but effective so we’ll discover how to do it, along with some suggested variations.

Image and <div> wrapper

You only really need two page elements within your HTML document consisting of an image nested within a <div>. Our image is a simple JPG within the root of our page, in this instance with dimensions of 750 by 750 pixels, but sizing is unimportant. The main element is the <div> that acts as a wrapper or mask once we attach CSS classes and applying the transitions and transforms. Give it a unique class name:

001 <body>
002 <div>    
003     <img  src="myImage.jpg"/>
004 </div>
005 </body>
006 </html>

Style the wrapper element

Much of our demo page styling is purely decoration and not wholly necessary. We’ve added a solid white border with a thicker bottom and box-shadow to give it a Polaroid feel. Then we stipulate width and margin positions the <div> centrally while forcing it to adopt to the full width of the image. Most vital is keeping overflow hidden so the image doesn’t protrude when it scales, while we adopt the same cursor switch as guillaumebouvet.com.

001 <style>
002 body {    
003     background:#7F7F7F;
004 }
005     imageWrap {
006         border: 20px solid #FFFFFF;
007         border-bottom: 80px solid     #FFFFFF;        
008         box-shadow: 6px 6px 12px #333;
009         width: 750px;
010         margin: 260px auto;
011         overflow: hidden;
012         cursor: pointer;
013     }

Attach transition to image

The first part of our CSS3 effect is stipulating the transition. Now this doesn’t do anything in itself but crucially it defines how style property changes will be rendered. The all keyword used here will apply the transition effect to ‘all’ properties rather than choosing a specific property. The 2s is duration and usually one second will suffice but here we’ve used two for illustration. Lastly, ease is the basic timing function of which several variations are available. If you have multiple images within the page with different transitions and effects, you can either specify multiple class names or prefix the class below with .imageWrap or the relevant <div> wrapper class name.

001 img {
002 /* Vender prefixes */    
003 -webkit-transition: all 2s ease;
004 -moz-transition: all 2s ease;
005 -o-transition: all 2s ease;
006 -ms-transition: all 2s ease;
007 transition: all 2s ease;
008 }

Make the image zoom

Initiating the zoom on rollover is very simply handled by a :hover pseudo-class attached to the image. The transform we apply is a scale() method, which is passed a fractional value to denote an increase or reduction. However, we’ve also added an alternative matrix() method favoured by guillaumebouvet.com. This is a 2D transform, providing extra options for coordination manipulation. Use either but not both.

001 img:hover {
002 /*    
003     -webkit-transform: scale(1.05);    004     -moz-transform: scale(1.05);
005     -ms-transform: scale(1.05);
006     -o-transform: scale(1.05);
007     transform: scale(1.25);    
008 */
009     -webkit-transform: matrix(1.05, 0, 0, 1.05, 0, 0);
010     -moz-transform: matrix(1.05, 0,     0, 1.05, 0, 0);
011     -ms-transform: matrix(1.05, 0, 0,     1.05, 0, 0);
012     -o-transform: matrix(1.05, 0, 0,     1.05, 0, 0);    
013     transform: matrix(1.05, 0, 0,     1.05, 0, 0);
014     }
015     </style>

Play with the matrix

Save your page and test the effect. You should see a very slight zoom on image rollover. If you wish to enhance that, simply increment the first and fourth values if you’re using matrix() method. Use matching values or you’ll cause a skew, plus if you do play around with the other values you’ll observe some funky results!

001 img:hover {
002 -webkit-transform: matrix(1.50,     0.25, 0, 1.50, 0, 0);    
003 -moz-transform: matrix(1.50, 0.25,    0, 1.50, 0, 0);
004 -ms-transform: matrix(1.50, 0.25,     0, 1.50, 0, 0);
005 -o-transform: matrix(1.50, 0.25, 0, 1.50, 0, 0);
006 transform: matrix(1.50, 0.25, 0,     1.50, 0, 0);
007 }
008 </style>
009
×