HTML:
<div class="col-md-4 col-sm-4">
<div class="thumbnail">
<div class="hover">
<div class="legenda">
<button class="btn-legenda">Ver este Projeto</button>
</div>
</div>
<img src="img/hidrau.png">
</div>
</div>
CSS:
.thumbnail{
position: relative!important;
border: none !important;
}
.hover{
margin: 0px;
padding: 0px;
display: block;
color: white;
overflow: hidden;
height: 97%;
box-sizing: border-box;
width: 98%;
text-align: center;
position: absolute;
max-width: 100%;
display: block;
opacity: 0;
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease;
}
.hover:hover{
opacity: 1;
}
.legenda{
padding-top: 25%;
}
.btn-legenda{
font-family: 'Roboto', sans-serif;
color: white;
background-color: black;
letter-spacing: 2px;
padding: 10px;
font-size: 1.2em;
border: 0.5px solid white;
transition: all 0.4s linear;
}
<div class="col-md-4 col-sm-4">
<div class="thumbnail">
<div class="hover">
<div class="legenda">
<button class="btn-legenda">Ver este Projeto</button>
</div>
</div>
<img src="img/hidrau.png">
</div>
</div>
.thumbnail{
position: relative!important;
border: none !important;
}
.hover{
margin: 0px;
padding: 0px;
display: block;
color: white;
overflow: hidden;
height: 97%;
box-sizing: border-box;
width: 98%;
text-align: center;
position: absolute;
max-width: 100%;
display: block;
opacity: 0;
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease;
}
.hover:hover{
opacity: 1;
}
.legenda{
padding-top: 25%;
}
.btn-legenda{
font-family: 'Roboto', sans-serif;
color: white;
background-color: black;
letter-spacing: 2px;
padding: 10px;
font-size: 1.2em;
border: 0.5px solid white;
transition: all 0.4s linear;
}