Wooster Wooster - 4 months ago 86
CSS Question

Overlay Text over Image CSS

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

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.

Comments