Respektīvi gribu ko šādu : https://codepen.io/philcheng/pen/YWyYwG
Tikai nevis kad pele hovero bildi, bet gan visu div class laukumu. Ņēmu kodu no šī paša saita, centos pielāgot. Viss baigi izplūst no rāmjiem...

HTML

<div id="body">
<div id="content">
<div class="box">
<div class="blog-content">
<h1>test123</h1>
<p>AAAAAAASDSDAGSDGFDSG</p>
</div>
</div>
</div>


CSS

.blog-content {
display:block;
opacity:1;
float:left;
overflow:hidden;
width:640px;
height:271px;
margin-top:5px;
padding:5px;
border:solid 1px;
transition: .5s ease;
backface-visibility: hidden;
}

.blog-content img{
float:left;
}
.blog-content img a:hover{
opacity:0.5;
}

.blog-content h1,h2,h3 {
text-align:center;
padding-top:10px;
}

.blog-content p{
float:left;
margin:10px;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
background: rgba(0, 0, 0, 0);
transition: background 0.5s ease;
}

.blog-content:hover .overlay {
display: block;
background: rgba(0, 0, 0, .3);
}
.button {
position: absolute;
width: 500px;
left:0;
top: 180px;
text-align: center;
opacity: 0;
transition: opacity .35s ease;
}

.button a{
width: 200px;
padding: 12px 48px;
text-align: center;
color: white;
border: solid 2px white;
z-index: 1;
}

.blog-content:hover .button {
opacity:1;