I love CSS3. The new transforms are incredibly powerful, and I'm learning new things that I can do with them and the other new CSS3 features every day.

Here is a quick example of a CSS3 transform for image links that I've started using. The effect is a slow zoom on the image on hover. The markup requires a wrapper div and looks like this:

<div class="wrapper">
  <a href="#"><img src="someimage.jpg" alt="" /></a>
</div>

In our CSS we need to set a height or width on the wrapper div that is at least equal to the size of the image, along with overflow: hidden. Here we're using an image that is big, so it's safe to make it responsive by setting our wrapper width as a percentage and leaving height set to auto:

div.wrapper {
  overflow: hidden;
  width: 100%;
  height: auto;
}
a img {
  -webkit-transition: -webkit-transform 0.4s ease;
  -moz-transition: -moz-transform 0.4s ease;
  -o-transition: -o-transform 0.4s ease;
  transition: transform 0.4s ease;
}
a img:hover {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}

And the result:

This kind of effect is ideal when you've got big images that are fully rectangle or square shaped, which is why I love using it on photo galleries, portfolios, and big splash image backgrounds. It avoids re-sizing the element on the page but still adds that hint of interactivity that is key to making a website feel responsive to the user.

For added portability, you can use jQuery to apply the effect to all image links automatically. This can get tricky because the script needs to run after all images are loaded so that they have proper dimensions for it to measure to create the wrapper div, but it's a nice hack if the situation allows for it:

/* We are getting help here from desandro's imagesLoaded plugin, but this could be triggered differently to avoid this dependency */ 
$( document ).imagesLoaded( function() {

   // Select all images that are links
   var $imageLinks = $( 'a img' );
  
   // Loop through each image that is a link  
   $imageLinks.each( function(){

      // Store the current item
      var $this = $( this );

      // Wrap the image link in a div
      $this.parent( 'a' ).wrap( '<div class="img-link-wrapper" style="display: inline-block; text-align: center;"></div>' );

      // Setup initial css
      $this.css({ '-webkit-transition' : '0.4s ease',
                  '-moz-transition' : '0.4s ease',
                  '-o-transition' : '0.4s ease',
                  'transition' : '0.4s ease'
                });
     
      // Set the height of the wrapper div to the height of the image
      var imgHeight = $this.height();
      var imgWidth = $this.width();
      $this.parents( 'div.img-link-wrapper' )
           .css({ 'height' : imgHeight,
                  'width' : imgWidth,
                  'overflow' : 'hidden'
                });
   });

   // Set up a .hovered class
   $( 'body' ).append( '<style>.img-link-hovered {-webkit-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05);}</style>' );

   // add/remove the class on hover
   $( 'a img' ).hover(
      function() {
         $( this ).addClass( 'img-link-hovered' );
      }, function() {
         $( this ).removeClass( 'img-link-hovered' );
      }
   );
});

The result:

See the Pen Hover zoom on image links using only jQuery by Braad Martin (@BraadMartin) on CodePen.0

You might use a script like this to achieve the hover zoom effect in a situation where you're doing front-end work on top of some markup that you can't control. jQuery can be infinitely useful in these situations.

-Braad