How to Add Transparent Overlay Effect to Images with CSS?

By Digamber Rawat Last updated on
Today I’m going to explore how to add overlay to image using CSS, Color overlays are magical. They are great addition to your website. For instance, color overlays can enrich your interactive image gallery like nothing else. Here in this tutorial, we are going to cover CSS aspect of the same:

The problem arises when you want to use images in the case on onclick events or links. As far as text links are concerned, they come with a standard “hover” effect. That is not the same when it comes to images. It gets complicated when we approach it from the UI perspective. Visual indication about a link is a must for the users.

CSS color overlay

Well, you should not think that we are stressing on user experience and design. There is more to it. According to the web accessibility guidelines, links must come with a distinction. Else, the users might find it hard to figure out where they are on the page. We are going to explore CSS color overlay and image overlay CSS.

So, adding hover effects to image links has become a real problem that needs to be solved. Here come color overlays; which is a prevalent method. It creates the hover effect without any complication. Moreover, your website will thank you for the visual complexity it has gained. Not just that, the web users also will thank you for the same for making it easier for them.

Here in this tutorial, we intend to teach you the technique to bring life to an otherwise dull page.

HTML

Thanks to the existing Bootstrap 4 classes, HTML code is rather simplified. However, we must pay attention to the “overlay-effect” div. We are referring to an empty div here. This div will turn into our image overlay.

<div class="container py-2">
  <div class="row">
    <div class="col-md-6">
      <div class="full-block w-100">
        <div class="overlay-block h-100 w-100"></div>
        <div>
          <h3><a href="#">Lorem ipsum dolor <br>sit amet</a></h3>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="half-block">
        <div class="overlay-block h-100 w-100"></div>
        <div>
          <h3><a href="#">Lorem ipsum dolor <br>sit amet</a></h3>
        </div>
      </div>
      <div class="half-second">
        <div class="overlay-block h-100 w-100"></div>
        <div>
          <h3><a href="#">Lorem ipsum dolor <br>sit amet</a></h3>
        </div>
      </div>
    </div>
  </div>
</div>

We have utilized 2 new classes named “w-100” and “h-100” besides the “overlay-effect” class as you can see. We have used them to make sure that the box stretches 100% in all directions. Color overlay CSS is another feature.

CSS

Without any doubt, the overlay-effect class is an essential CSS class. You will specify the overlay color and transition properties in this class:

.full-block {
  background: url('https://www.positronx.io/wp-content/uploads/2019/03/galaxy-background-2634-08.jpg') 0 0 no-repeat;
  min-height: 300px;
}

.half-block {
  background: url('https://www.positronx.io/wp-content/uploads/2019/03/galaxy-background-2634-04.jpg') 0 0 no-repeat;
  min-height: 250px;
  margin-bottom: 30px;
}

.half-second {
  background: url('https://www.positronx.io/wp-content/uploads/2019/03/galaxy-background-2634-09.jpg') 0 0 no-repeat;
  min-height: 250px;
}

.full-block,
.half-block,
.half-second {
  background-size: cover;
  position: relative;
}

.full-block:hover .overlay-block,
.half-block:hover .overlay-block,
.half-second:hover .overlay-block {
  opacity: 1;
  cursor: pointer;
}

.overlay-block {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: 0.5s ease;
  background-color: rgba(96, 41, 169, 0.7);
  overflow: hidden;
}

.full-block a,
.half-block a,
.half-second a {
  color: #fff;
}

.full-block h3,
.half-block h3,
.half-second h3 {
  padding: 15px 30px;
}

@media screen and (max-width: 768px) {
  .full-block,
  .half-block,
  .half-second {
    margin-bottom: 20px
  }
}

Adding overlay to images using CSS Demo

You need to remember that the hover classes are extremely important. These classes change the opacity from zero to one, thereby activating the overlay-effect.

If you are curious to check this functionality before you implement it on your website, we can arrange the same. You may try this on the JSFiddle given below. We suggest that you adjust the browser window to the appropriate sizes in order to see the effect on mobile screens.

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.

Hire Me