JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<a href="#">
    <div class="stockimgv">
    <img src="http://www.divine-designs.net/wordpress/wp-content/uploads/2014/04/IMG_3637p.jpg">
<div class="overlay"></div>
<div class="button"></div>
    </div>
    </a>

CSS

.stockimgv {
  width: 760px;
  height: 1140px;
  padding: 5px;
  border: 1px #E0E0E0 solid; 
  border-radius: 2px;
  background: #EBEBEB;
  transition: all 1s ease;
}
.stockimgv img {
  width: 100%;
}
.stockimgv:hover .overlay {
  background: #000;
  opacity:0.8;
}
.stockimgv:hover .button {
  width: 70px;
  height: 70px;
  margin: -648px auto 0 auto;
  background: url(http://www.divine-designs.net/wordpress/wp-content/uploads/2014/09/zoom.png) center center no-repeat #39d;
  opacity: .7;
  transform:scale(1);
  animation-delay: inherit;
  animation:scale .5s infinite;   
  cursor: pointer;
}

.stockimgv:hover .button:hover {
  background: url(http://www.divine-designs.net/wordpress/wp-content/uploads/2014/09/zoom.png) center center no-repeat #9ac653; 
}

.stockimgv .overlay {
  width: 100%;
  height: 100%;
  margin: -1145px 0 0 0;
  background: #000;
  opacity:0;
  transition: all 1s ease;
}

.button {
  width: 123px;
  height: 123px;
  margin: -123px auto 0 auto;
  background: url(http://immedesign.nl/cssdeck/next.png) center center no-repeat;
  opacity: 0;
  border-radius: 50%;
  transition: all .2s ease;
}

@keyframes scale {
  0%   { transform:scale(1); }
  50%   { transform:scale(1.1); }
  100% { transform:scale(1); }
}