SOURCE

<div class='diamond'><img src='https://d3cbihxaqsuq0s.cloudfront.net/images/38044388_xl.jpg'></div>

img{
  width:200px;
  height:200px;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  transition:1s clip-path;
  margin:50px;
}
img:hover{
  clip-path:polygon(0 0,100% 0,100% 100%, 0 100%);
}