Caption with CSS mouseover

Question

Caption with CSS mouseover

Asked 7 years, 8 months ago

Viewed 1,211 times

2

Guys, I got a thumbnail of bootstrap, I implemented within it a div caption, which should appear with the mouse on top. Only it is bursting the size of the div father, who in this case is the Thumbnail and the col-md-4, this way remain some burrs of the internal div, and when I put the pseudo-classe :hover, the effect does not roll, where am I missing? So far she is like this:

I’d like it to look something like this:

Source: http://diogorodrigues.com.br/

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

It would be simpler to help if you could recreate the problem here.

– Leon Freire

2017/04/10 at 13:00

2 answers

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.

by Tiago Silveira • **665** points · Answer 1 · 2017-04-10T13:19:14+00:00

I managed to sort it out like 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>

by hugocsl • **65,517** points · Answer 2 · 2018-01-16T11:16:04+00:00

I had to make some adjustments to your CSS, but I didn’t touch the HTML.

I left it all in the CSS. Now the overlay black does not exceed the parent element as I am using the function calc() CSS to discount the margins and paddins of other classes that were influencing this. (also put a class on img{} face that all images occupy the total space of the Thumbnail and do not exceed blank spaces)

OBS: Important. Bootstrap changes some Paddins and Margins for some class depending on the screen size. Then it is necessary to add this @media to the black overlay to work right on all screens. ( @dvd tip in another reply)

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

Perform the Snippet in "Whole page" to see right since you’re with <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>