CSS Image Overlay Text on Hover

In this tutorial, I will create an Image Overlay Text on hover with the help of CSS Only. Also, The CSS image over the text block responsive for small devices. The CSS overly is a way of adding opacity color background over an image. This opacity can be 50% which make the picture darkens a little bit.

And then to add a readable white text or read more button over an image. The purpose of doing this to provide a user to quickly access the piece of content on the photo.

Just to make sure — By default — The content or button over the picture is hidden and can only be accessed when a user hovers the image.

There are different ways to create the color overlay for background image and here I will use one of them. All of these methods work with CSS only but the techniques are different.

These techniques are:

• Using pseudo-element :after & :before
• Using Opacity & Background Properties.
• Positioned Element Absolutely.

All of the techniques are good to use but I personally like to use pseudo-element because it’s working well on all kind of browsers and devices.

The second method opacity & the background is also a great way to create dark overlays, but sometimes people don’t want to use an image as background in CSS. so this may not be useful for those people.

The third technique positioned element is also good and works well but It’s your preference you want to use it and can handle on mobile screens.

HTML for Image Overlay Text

Let’s get started to create the effect. We have a div and place an image inside it. We also wrap the image with an anchor link with the class name pseudover.

<div class="overlaythree">
    <a href="#" class="pseudover v2" title="Find out more">
        <img src="img/photo1.jpg" alt="overlay">
    </a>
</div>

CSS for Overlay Text

Now all we need to styling. We will specify the width and height of the container and for the link, I will set its position and add display property.

.overlaythree {
   width:480px;
   height: 360px;
   display: inline-block;
}
.pseudover {
  position: relative;
  display: inline-block;
}

Handling :after

To show the text on the image, We will define the content attribute with the help of CSS :after for overlay. On-hover, We will show it.

.pseudover:after {
  content: attr(title);
  color: rgba(255, 255, 255, 0.75);
  padding: .5em 1em;
  font-family: helvetica;
  position: absolute;
  top: 0;
  right: 0;
  transition: all .25s ease-in-out;
}
.pseudover:hover:after {
  background: rgba(0, 182, 221, 0.8);
  color: #fff;
}

Implement :Before

With the help of :before, We will show the title on hover and position it center of div.

.pseudover.v2:after {
  content: "";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.pseudover.v2:hover:before {
  content: attr(title);
  position: absolute;
  margin-top: -.5em;
  top: 50%;
  left: 0;
  width: 100%;
  color: #fff;
  z-index: 2;
  text-align: center;
  font-family: helvetica;
}

I highly encourage you to play around with the transitions, exploring different methods and techniques.

Feel free to leave any comments or feedback below! Don’t forget to share this with your friends to support us!