Add Black Image Overlay with CSS Transparency

In this article, I will show you how to add a black transparent black overlay to the image by using the CSS only. I will do that without affecting the text or other overlap elements.

Just to be noted, I will do that by inline the image inside the div but if you want to keep the image as background then you can check out our article Transparent Overlay Background Image.

To apply the transparent overlay to the image, I will use the opacity property which can take a value from 0.0 – 1.0. The lower the value, the more transparent. When the user hovers the image, it will see a nice transparent black background with Icon or text.

Note That: The IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent.

Another way, We can use the RGBA colors. If you don’t know then you can simply convert the Hex to RGBA color.

Add Black Image Overlay with CSS Transparency

We have done two overlay effects. Each one wraps up with a div class name resource. The external div resource includes the image and then a div for the overlay. We place the Heading and an Icon

<div class="resource">
<img src="https://static1.squarespace.com/static/55ac6d80e4b0a964784b2f80/t/5703eb2e746fb98cc2510ebd/1459874606989/PsZyN43.png" />
<div id="overlay5">
  <h2 class="img-title">fade in</h2>
  <p class="fa fa-plus-square-o fa-4x img-icon"></p>
</div>
</div>

In your CSS file, you’ll need to set the outer div (resource) to position: relative, while the inner div (overlay5 or overlay8) should be set to position: absolute. The inner div should be configured to top: auto and bottom: 0, with width: 100% and height: 100%.

Once you’ve set these properties, you can customize the color, opacity, transition, etc. You can also add an image to the overlay.

The Style

I originally coded this in purely CSS, and no javascript required. I used the font awesome for icons on hover.

body {
  background: #7a2c2c;
  color: #16a085;
  font-family: 'Oxygen', Arial;
  text-align: center;
}
#title,
#subtitle {
  font-size: 2.5em;
  letter-spacing: .3em;
  color: #16a085;
  margin: 0;
  text-transform: uppercase;
  font-family: 'Bungee', Arial;
}
.container {
  margin: 20px auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.resource {
	color: white;
    display: inline-block;
    height: 250px;
    margin: 4em;
    overflow: hidden;
    position: relative;
    width: 400px;
}
.resource img {
  width: 100%;
  height: 100%;
}
.img-title {
  font-weight: 300;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.img-title,
.img-icon {
  margin: 0;
}
#overlay5 {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.85);
  width: 100%;
  height: 100%;
  position: absolute;
  top: auto;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#overlay8 {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.85);
  width: 100%;
  height: 100%;
  position: absolute;
  top: auto;
  bottom: 0;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.resource:hover img {
  transform: scale(2);
  transition: transform 0.5s;
}
.resource:hover #overlay5 {
  opacity: 1;
}
.resource:hover #overlay8 {
  opacity: 1;
  transform: scale(1);
}