Hover & Zoom with CSS 3

CSS Animation

CSS3 provides some nifty animation capabilities. Below is an example of using the CSS3 transform property, combined with the :hover pseudo class, that provides some nice interactive effects. Hover your mouse over each picture to see it work

CSS Code for this Example

  .zoom {
      float: left;
      transition: transform;
      transition-duration: .5s;
      max-width: 200px;
      margin-right: 5px;
      margin-bottom: 5px;
      z-index: 0;
  }

  .zoom:hover {
      z-index: 1;
      transform: scale(1.5);
      box-shadow: 0px 0px 15px rgba(200,0,0,.5);
  }

Example