I've grown fond of having images that are links grow in size when the user hovers over them with the mouse. My favorite way to achieve this effect uses only CSS and is rather simple. Say you have some html that looks like this:

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

We can achieve the effect by setting the height of the wrapper to the height of our image, which allows us to set the height of the image to something like 92% and set margin-top to 4% (half the difference between 92% and 100%). Then we take away the margin-top and set height to 100% on hover using the :hover pseudo-class.

For an image that is 250px by 250px, the CSS would look like this:

.wrapper {
  width: 250px;
  height: 250px;
  text-align: center;
}

.wrapper img {
  margin: 4% 0;
  height: 92%;
  width: auto;
}

.wrapper img:hover {
  margin: 0;
  height: 100%;
}

And the result:

Well that works great for square images and images that are taller than they are wide, but what about images that are short and wide? You can make it work with these images by setting the image to grow by its width rather than its height, and setting the initial margin on the left and right. This will cause the image to grow downwards from its initial position, but setting an initial margin-top and margin-bottom equal to half the number of pixels the image grows vertically by will keep it vertically centered. For this image that is 250px wide by 129px tall, the magic margin number is 5px:

.wrapper {
  width: 250px;
  height: 129px;
  text-align: center;
}

.wrapper img {
  margin: 5px 4%;
  width: 92%;
  height: auto;
}

.wrapper img:hover {
  margin: 0;
  width: 100%;
}

The result:

If you want to get real fancy, you can add a transition animation. If you add one on hover, make sure to add one on the way out for ultimate smoothness:

.wrapper {
  width: 250px;
  height: 250px;
  text-align: center;
}

.wrapper img {
  margin: 4% 0;
  height: 92%;
  width: auto;
  -webkit-transition: margin 0.3s, height 0.3s;
  -moz-transition: margin 0.3s, height 0.3s;
  -o-transition: margin 0.3s, height 0.3s;
  transition: margin 0.3s, height 0.3s;
}

.wrapper img:hover {
  margin: 0;
  height: 100%;
  -webkit-transition: margin 0.3s, height 0.3s;
  -moz-transition: margin 0.3s, height 0.3s;
  -o-transition: margin 0.3s, height 0.3s;
  transition: margin 0.3s, height 0.3s;
}

The result:

Once you start playing with transition timing functions and delays you can do some very cool effects, and if you bring in some box-shadow and filters the possibilities become endless.

This could also be wrapped up in some jQuery for added flexibility. There are a couple of extra things to think about, like whether you have any padding or margin already set on certain images that might be critical to the layout, but here is a quick example that will target all images that are links and doesn't require any markup changes:

// Start on window load because we need images to be loaded 
$( window ).load( function(){

   // Loop through each image that is a link
   $( 'a img' ).each( function(){

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

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

      // Set the height of the 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     
                });

      // Set the rest of the initial css
      $this.css({ 'height' : '94%',
                  'width' : 'auto',
                  'margin' : '3% 0'
                });
   });

   // Set up a .hovered class
   $( 'body' ).append( '<style>img.img-link-hovered{ margin-top: 0 !important; margin-bottom: 0 !important; height: 100% !important; }</style>' );

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

See the Pen Hover enlarge on images that are links by Braad Martin (@BraadMartin) on CodePen.0

What fun!

-Braad