JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div class="view third-effect">
  <img src="http://www.divine-designs.net/wordpress/wp-content/uploads/2014/04/IMG_3595p.jpg" />  
<div class="mask">  
    <a href="#" class="info" title="Full Image">Full Image</a>  
  </div>  
</div>

CSS

img {
    width: 700px;
    height: 507px;
}

.view {
   width: 700px;
   height: 507px;
   margin: 10px;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}

.view .mask, .view .content {
   width: 760px;
   height: 507px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view img {
   display: block;
   position: relative;
}

.view a.info {
   background:url('http://i.imgur.com/iFewSgq.png') center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:50px;
   height:50px;
}

.third-effect {
    transition: 0.7s;
}

.third-effect a.info {
   position:relative;
   top:250px; /* Center the link */
   left: -30px;
   opacity: 0;
   transition: opacity 0.5s 0s ease-in-out;
}

.third-effect:hover a.info {
   opacity:1;
   transition-delay: 0.3s;
}

.third-effect:hover {
   opacity: 0.4;   
   transition: 0.7s;
}