Cacher is the code snippet organizer for pro developers

<ul class="gallery">
  <li><a href="#"><img src="photo-1.jpg" /></a></li>
  <li><a href="#"><img src="photo-2.jpg" /></a></li>
  <li><a href="#"><img src="photo-3.jpg" /></a></li>
</ul>

ul.gallery li {
  float: left;
  margin: 0 10px;
  padding: 10px;
  border: 1px solid #ddd;
  list-style: none;
  }

ul.gallery li a img {
  float: left;
  width: 200px;
  }

/*scale transforms on hover. Note this occurs on the a link.*/
ul.gallery li a:hover img {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  }

/*the scale can also be set to start from some place other than the center.  Here it is 
beginging from the bottom left.*/
ul.gallery li a:hover img {
  -webkit-transform-origin: bottom left; 
  -moz-transform-origin: bottom left; 
  -o-transform-origin: bottom left; 
  transform-origin: bottom left; 
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  “-o-transform: scale(1.5);
  transform: scale(1.5);
  }

/*Some box-shodow can be a great addition here.*/
ul.gallery li a:hover img {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
/*it's smart to also add a transition.  The property being transitioned is the scale
transform, so vendor prefixes are in place for both the transition and transform properties.*/
ul.gallery li {
  float: left;
  margin: 0 10px;
  padding: 10px;
  border: 1px solid #ddd;
  list-style: none;
  }

ul.gallery li a img {
  float: left;
  width: 200px;
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  -moz-transition: -moz-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out; 
  }

ul.gallery li a:hover img {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); 
  } 

/*An extra flourish if wanted could be having the image rotate or tilt on hover.*/
ul.gallery li a:hover img {
  -webkit-transform: scale(1.5) rotate(-10deg);
  -moz-transform: scale(1.5) rotate(-10deg);
  -o-transform: scale(1.5) rotate(-10deg);
  transform: scale(1.5) rotate(-10deg);
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  }

/*The rotation could be varied to make it appear that the items were randomly thrown down.*/

/*The translate property could be used to on hover move the object 20px from the rigt, and 40px from the top.*/
ul.gallery li a:hover img {
  -webkit-transform: scale(1.5) translate(20px, 40px);
  -moz-transform: scale(1.5) translate(20px, 40px);
  -o-transform: scale(1.5) translate(20px, 40px);
  transform: scale(1.5) translate(20px, 40px);
  }

/*If we wanted to move the image to the left and/or top, we’d use negative values, e.g., translate(-20px, -40px).*/