How do I put Hover in an image?

Question

How do I put Hover in a picture. And when passed the mouse appears the Hover with text inside.

Answer 1

It is not necessary to use exactly one image (I’m talking about the tag img). You can use a div with background-image. Inside that div you’ll put another div, with opacity:0. When pass the mouse over the div, you will make the houver of the same, affect the div with the text (that will be the daughter), changing the value of the same to opacity:1.

I’ll show you an example:

.imagem{
  background-image: url(http://i.stack.imgur.com/lvici.jpg);  
  height:300px;
  width:400px;
  background-size:100% auto;
}

.texto{
  padding:20px;
  font-family:Arial;
  text-align:center;
  color:white;
  opacity:0;
  transition: opacity .2s linear;
  background-color:rgba(0,0,0,.7);
}

.imagem:hover .texto{
  opacity:1;
 }

<div class="imagem">
  <div class="texto"><h2>Recém casados</h2></div>
</div>

Answer 2

The Father element would be the div that contains the image.

That one div must be position: relative.

Inside it I put a span with a text. This span must be position: absolute which will be under amendments relating to the parent element.

Then just put it in the center with the CSS properties:

.hover-image{
  position: relative;
  width: 350px;
}

OBS: THE bottom is not above because I made an effect for the span get in the middle. See the feature below:

---

.hover-image {
  position: absolute;
  left: 0;
  top: 0;
  margin: auto;
}
.hover-image span {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  bottom: 200px;
  width: 100%;
  line-height: 45px;
  height: 45px;
  display: block;
  background-color: #000;
  color: #FFF;
  text-align: center;
  font-family: "Roboto";
  left: 0;
  top: 0;
  margin: auto;
  transition: all 0.4s ease;
}
.hover-image:hover span {
  opacity: 1;
  visibility: visible;
  bottom: 0;
}

<div class="hover-image">
  <img src="http://placehold.it/350x150">
  <span class="texto">Welcome</span>
</div>