<li class="product"><img src="http://lorempixel.com/600/300/technics/5/" alt="img">
      <div class="caption">	
        <span> Product </span>
      </div>
	  <a class="btn" href="#">View Product</a>
   </li>

.product {
  width: 600px;
  height: 300px;
  position: relative;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  display: block;
} 
.caption {
	position: absolute;
   top:0;
    width: 100%;
    height: 100%;
    color: #f6f6f6;
    background: rgb(6, 38, 85);
    opacity: 0.8;
    transition: all 350ms ease-in;
    z-index: 2;  
}
.caption span {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
    margin-top: 40px;
}
.product:hover .caption {
		opacity: 0;		   
	}
a.btn {
    color: #fff;
    font-size: 0.8em;
    font-weight: 700;
    background: blue;
    padding: 15px 55px;
    text-decoration: none;
    display: block;
    text-align: center;
    opacity: 0;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    margin-top: -160px;
    left: 0;
    right: 0;
    max-width: fit-content;
    position: absolute;
    transition: all 350ms ease-in;
}
.product:hover a.btn {
	opacity: 1;
}