Skip to main content

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;
}
 

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;
}

.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>
 

Fonte Link

Consegui resolver assim:

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;
}