<style>
.zoom {
    opacity: 0.5;
    -webkit-transition: opacity .5s ease-in-out,
    -webkit-transform .5s ease-in-out,
    background-color 1s ease-in-out;
    -moz-transition: opacity .5s ease-in-out,
    -moz-transform .5s ease-in-out,
    background-color 1s ease-in-out;
    -o-transition: opacity .5s ease-in-out,
    -o-transform .5s ease-in-out,
    background-color 1s ease-in-out;
    transition: opacity .5s ease-in-out,
    transform .5s ease-in-out,
    background-color 1s ease-in-out;
    height:200px;
    width:200px;
}
.zoom:hover {
    opacity: 1;
    -webkit-transform: scale(2.0);
    -moz-transform: scale(2.0);
    -o-transform: scale(2.0);
    transform: scale(2.0);
   background-color: #881100;
}
.pic {
  height: 150px;
  width: 150px;
  overflow: hidden;
  margin:0 auto;
  border: 5px solid white;
  -webkit-box-shadow: 5px 5px 5px #111;
  box-shadow: 5px 5px 5px #111;
}
.pic:hover {
  cursor: pointer;
}
</style>
 <div class ="zoom pic"><img src="$1" height="150px" width="150px" alt="zoom"></div>