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:

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;
    }
}

Pawan Kumar · Accepted Answer · 2017-06-25T16:07:57.457

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>

@HappyHands31 I have inspect those images but there is no such `
This image 1 looks super neat.
` code there. Please add those so that I can try something. Also, have you added some new css classes as it is in my answer. — Pawan Kumar, Jun 25 '17 at 07:21
Oh sorry, I had changed it back. Let me make the changes again. — HappyHands31, Jun 25 '17 at 13:55
Actually your code is working now and I will go ahead and give you the answer - unfortunately I'm trying to get "My Work" to be above all of the images in its own separate row. Trying to fix this to look like the wireframe: http://i.imgur.com/wrQeuvj.jpg — HappyHands31, Jun 25 '17 at 14:09
**EDIT** - Figured that out - now I've just lost the initial overlay / box shadow. Also how do you center the text horizontally? — HappyHands31, Jun 25 '17 at 14:15
To center align the text, use `text-align:center` in the parent div of the text. — Pawan Kumar, Jun 25 '17 at 15:47

score 0 · Answer 2 · answered Jun 24 '17 at 20:32

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/

Pawan Kumar answer is more complete. you forgot to give .my-work-image position: relative; which is essential for it to work. — , Jun 24 '17 at 20:37

Jacob Birkett · Answer 3 · 2017-06-24T21:31:14.143

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>

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

3 Answers3