Precisei fazer alguns ajustes no seu CSS, mas não mexi no HTML.
Deixei tudo comentado no CSS. Agora o overlay preto não ultrapassa o elemento pai, pois estou usando a função calc()
do CSS para descontar as margins e paddins de outras classes que estava influenciando nisso. (também coloquei uma classe na img{}
cara que todas as imagens ocupem o espaço total do Thumbnail e não sobrem espaços em branco)
OBS: Importante. O Bootstrap muda alguns Paddins e Margins para algumas classe dependendo do tamanho da tela. Então é precisa adiciona esse @media para o overlay preto funcionar direitinho em todas as telas. (Dica do @dvd em outra resposta)
@media screen and (min-width: 768px) {
.hover{
/* calcula o tamanho total menos as margins e padding dos elementos pai */
height: calc(100% - 30px);
}
}
Execute o Snippet em "Página Toda" para ver direito já que está com <div class="col-md-4 col-sm-4">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
.hover{
position: absolute;
margin: 0px;
padding: 0px;
/* calcula o tamanho total menos as margins e padding dos elementos pai */
height: calc(100% - 10px);
width: calc(100% - 40px);
box-sizing: border-box;
transition: all 0.25s linear;
}
.hover:hover{
background-color: rgba(0, 0, 0, 0.5);
}
/* para alinhar btn no centro do tumbnail */
.legenda{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-legenda{
font-family: 'Roboto', sans-serif;
color: white;
background-color: rgb(0, 0, 0);
letter-spacing: 2px;
padding: 10px;
font-size: 1.2em;
border: 0.5px solid white;
transition: all 0.4s linear;
}
.btn-legenda:hover{
background-color: white;
color: black;
}
/* para deixar a img em 100% do tumbnail */
img {
min-width: 100%;
height: auto;
}
/* nas tela maiores tem um ajuste de padding na classe e vc precisa corrigir a altura */
@media screen and (min-width: 768px) {
.hover{
/* calcula o tamanho total menos as margins e padding dos elementos pai */
height: calc(100% - 30px);
}
}
</style>
</head>
<body>
<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="http://placecage.com/300/400" />
</div>
</div>
<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="http://placecage.com/300/200" />
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>