Image css example

gistfile1.css

/*
<div>
  <a href="#" class="abbey">
    <img src="SaintMichaelAbbey.jpg" alt="Saint Michel Abbey, France">
    Saint Michel Abbey, France
  </a>
</div>
*/

body {
  background-color: #EDEDE2;
  font-family: sans-serif;
  font-size: 14px;
}
a.abbey img{
  width:200px;
}
.abbey img {
  margin: 0 0 15px;
}
a img {
  border: none;
  display: block;
}
a.abbey {
  display: block;
  margin: 30px auto 0 auto;
  text-decoration: none;
  color: #787871;
  padding: 13px 13px 26px 13px;
  width: 200px;
  border: 1px solid #BFBFBF;
  background-color: #ffffff;
  -webkit-box-shadow: 3px 3px 6px rgba(0,0, 0, 0.4);
  -moz-box-shadow: 3px 3px 6px rgba(0,0, 0, 0.4);
  box-shadow: 3px 3px 6px rgba(0,0, 0, 0.4);
  -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
  transform: rotate(-15deg);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

a.abbey:hover,
a.abbey:focus,
a.abbey:active {
	-webkit-box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
	-moz-box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
	box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
  -webkit-transform: rotate(0deg) scale(1.5);
  -moz-transform: rotate(0deg) scale(1.5);
  transform: rotate(0deg) scale(1.5);
}


a.abbey:hover img,
a.abbey:focus img,
a.abbey:active img{
  -webkit-transform: rotate(0deg) scale(1);
  -moz-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1);
}