Overlay Text over Image CSS

Question

How do I overlay text over my image when i hover over the image element with a mouse?

The text doesn't show the text between my span when i hover over the image? I have tried display inline-block within my .text class, however, it adds the either to the right of the image or below instead of overlay

Html:

<section id="images">
    <div class="wrapper">
        <div><img style="width: 300px;" src="img/howitworks_tile@2x.jpg"></img><span class="text">How It Works</span></div><div><img style="width: 300px;" src="img/dermvsspec_tile@2x.jpg"></img><span class="text">Dermatologist or Acne Specialist</span></div><div><img style="width: 300px;" src="img/treatments_tile@2x.jpg"></img><span class="text">Facial</span></div>
    </div>
</section>

CSS:

section#images {
   display: block;
}

section#images .wrapper {
   text-align: center;
margin: 0 auto;
}

section#images .wrapper div {
   display: inline-block;
   position: relative;
   background: orange;
}


section#images .wrapper div span {
   display: none;
}

section#images .wrapper div:hover img {
   opacity: 0.8;
}

section#images .wrapper div img span{
   font-size: 24px;
   font-weight: 900;
   font-family: Helvetica;
   color: green;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

section#images .wrapper div img span.text {
   color: white;
   cursor: pointer;
   height: 150px;
   position: absolute;
   opacity: 0;
   left: 0;
   top: 0;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

Answer 1

Something like this? Demo

The main issue with your code was that you don't toggle your <span> from being hidden with display:none to a property that makes it visible again when mouse-over.

The following fixes that:

section#images .wrapper div:hover span {
  display: inline-block;
}

To get the <span> be in the middle of your image, add this:

section#images .wrapper div span {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

This sets your <span> to be absolutely positioned in relation to the parent <div>. Then, you set the text in the middle with the applied left, top, and transform properties.