By
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
