How to Get Text To Appear On Top of Image On Hover With CSS

Question

Currently, when you hover over in image, the opacity gets lighter:

https://jsfiddle.net/vo1npqdx/1268/

This is correct, but now I also want some link text to appear on top of the image as well. I tried to follow the solution in this example:

How to show text on image when hovering?

But when I tried this technique, empty space appears below the image, the text doesn't show up on top, and it isn't centered over the image:

https://jsfiddle.net/vo1npqdx/1269/

I can't seem to figure out how to make the paragraph text appear on top of the box shadow and centered using CSS - any suggestions? If not, then how would this be done with JavaScript? Thank you.

HTML:

<div class="row thumbnail-row">
<div class="my-work-image" id="margin-left-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/hamburger-thumbnail.jpg"/>        
    <p class="initial-hidden">The Hamburger Collection</p>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/yoyomoi-thumbnail.jpg"/>   
</div>
<div class="my-work-image"> 
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/dogs-thumbnail.jpg"/>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/gateway-thumbnail.jpg"/>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/chameleon-thumbnail.jpg"/>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/adrienne-thumbnail.jpg"/>
</div>
<div class="my-work-image">
    <img class="thumbnail-image" src="/wp-content/themes/gatewaywebdesign/assets/images/castaway-thumbnail.jpg"/>
</div>
</div><!--end row-->

CSS:

.thumbnail-row {
display: flex;
}
.thumbnail-row div {
position: relative;
}
.thumbnail-row div::after {
content: '';
position: absolute;
top: 0; left: 0; 
width: 100%;
height: 100%;  
box-shadow: inset 0 0 0 3000px rgba(27,61,88,.5);
}
.thumbnail-image {
display: inline-block;
max-width: 100%;
}

.my-work-image:hover {
opacity: 0.5;
}  

/*hidden text*/

.initial-hidden {
visibility: hidden;
text-align: center;
display: inline;
}

.my-work-image:hover .initial-hidden {
visibility: visible;
opacity: 1;
}

@media (max-width: 425px) {
.thumbnail-row {
flex-direction: column;
    }
}

Answer 1

Changes some of the display properties.

Also, change the left: 50%; in .img__description_layer class, if you want the text only shows in the half part of the image.

If you want the text to be in the center of the image, just remove the css class .thumbnail-row div::after

.thumbnail-row {
  display: flex;
}

.thumbnail-row div::after {  /*remove this class to display the text in center of the image*/
  content: '';
  position: relative;
  top: 0; left: 0; 
  width: 100%;
  height: 100%;  
  box-shadow: inset 0 0 0 3000px rgba(27,61,88,.5);
}
.thumbnail-image {
  display: inline-block;
  width: 100%;
  }
  
.my-work-image{
  position:relative;
}  

.img__description_layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;    /*change it to 50%, if you want the text only shows in the half part */
  right: 0;
  background: rgba(36, 62, 206, 0.6);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;

  text-align:center;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.my-work-image:hover .img__description_layer {
  visibility: visible;
  opacity: 1;
}

.img__description {
  transition: .2s;
  transform: translateY(1em);
}

.my-work-image:hover .img__description {
  transform: translateY(0);
}
  
@media (max-width: 425px) {
  .thumbnail-row {
    flex-direction: column;
  }
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">

  <div class="row thumbnail-row">
    <div class="my-work-image" id="margin-left-image">
      <img class="thumbnail-image" src="http://i.imgur.com/mNoKbYK.jpg" />
        <div class="img__description_layer">
          <span class="img__description">This image 1 looks super neat.</span>
        </div>
    </div>
    
    <div class="my-work-image">
      <img class="thumbnail-image" src="http://i.imgur.com/8b2sb03.jpg" />
       <div class="img__description_layer">
          <span class="img__description">This image 2 looks super neat.</span>
        </div>
    </div>
    <div class="my-work-image">
      <img class="thumbnail-image" src="http://i.imgur.com/Ac11pRH.jpg" />
       <div class="img__description_layer">
          <span class="img__description">This image 3 looks super neat.</span>
        </div>
    </div>
   
  </div>
  <!--end row-->
</div>

Answer 2

The transition, background, text color, etc can of course be changed.

I recommend adding a filter: blur(2px) to the image hover (.hoverable:hover img {}) to make it look pretty. Just make sure you match it with a transition.

I used flex to make the text centered, and a negative positioning on the <p> element to get rid of that odd white space at the bottom.

Edit: I also fixed the odd space at the bottom without hacks. Simply add vertical-align: bottom; to the image.

The display type of the parent (.hoverable) can also be channged without causing problems.

Here is a JSFiddle that has a few more examples: https://jsfiddle.net/spikespaz/p4ogwee2/

.hoverable {
  position: relative;
  width: 400px;
  overflow: hidden;
}

.hoverable img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}

.hoverable p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 500ms;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5)
}

.hoverable:hover p {
  opacity: 1;
}

<div class="hoverable">
  <img src="https://static.pexels.com/photos/39811/pexels-photo-39811.jpeg" alt="Road Image">
  <p>This text will be shown on hover.</p>
</div>

Answer 3

here's what i suggest:

/* fade out only the image, not the entire thing */
.my-work-image:hover img {
    opacity: 0.5;
}  

.initial-hidden {
    visibility: hidden;
    text-align: center;
    display: inline;
    line-height:1em;

    /* use css transform to center vertically and horizontally */
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    position:absolute; top:50%; left:50%;
    color:#FFFFFF;
    z-index:2;
}

https://jsfiddle.net/vo1npqdx/1272/