Legend with mouseover in CSS

Navigation
2

Well, I have a thumbnail of bootstrap , I implemented within it a div of legend, which should appear with the mouse on top. But it is popping the size of the% of parent%, which in this case is div and Thumbnail , so some burrs of the inner div remain, and when I put col-md-4 pseudo-classe , the effect do not roll, where am I going wrong? So far it looks like this:

Iwouldlikeittolooksomethinglikethis:

Source: link 

.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;
  background: rgba(0, 0, 0, 0.5);
}

.legenda{
  padding-top: 25%;
}

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

.hover:hover{
  transform: translateY();
}
<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>
    
asked by anonymous 08.04.2017 / 05:08

2 answers

1

I was able to solve this: 

.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>
    
10.04.2017 / 15:19
1

I needed to make some adjustments to your CSS, but I did not move in HTML.

I've left everything commented on in CSS.

Black overlay does not go over the parent element, as I'm using the CSS function calc() to discount margins and paddins from other classes that was influencing this. (I also put a class in the img{} face that all images will occupy the total space of the Thumbnail and not over white space)

  

OBS: Important. Bootstrap changes some Paddins and Margins to some class depending on screen size. So it's accurate add this @media to the black overlay to work fine on all screens. (@dvd tip in another response) 

@media screen and (min-width: 768px) {
.hover{
    /* calcula o tamanho total menos as margins e padding dos elementos pai */
    height: calc(100% - 30px);
    }
}

Run Snippet on "All Page" to see right since it has <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><divclass="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><scriptsrc="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>
    
16.01.2018 / 12:16
What is the Java stack class growth policy? Working with the file: // and Angular protocol