Use CSS ::before and ::after for simple, spicy image overlays (2023)

More and more in web design, we find ourselves putting text on top of images. More often than not, this is a dangerous game. Images have dynamic color and lighting and text for the most part is one color. This is often a nightmare for readability and accessibility.

This means we want to introduce an overlay to sit between the image and the text. Sometimes this darkens the background image enough for readability. Other times it's a branding opportunity. Either way we need a simple CSS technique to introduce this sort of overlay.

Since I prefer not to introduce new markup for an embelishment, we'll use the CSS ::after pseudo-element.

The process looks something like this:

  1. Create the simplest HTML for your area
  2. Use a ::before or ::after element to create your banner
  3. Fix z-index issues caused by absolute positioning
  4. Experiment with mix-blend-mode for fun and profit

Step 1: All the markup you need, none of the bloat

Use CSS ::before and ::after for simple, spicy image overlays (1)

In a banner, all we really want is the banner's container and any content that banner needs to contain.

<section class="banner">
<h1>Hello World</h1>
</section>

In this example, we'll just utilize a section container and an <h1>. If you added more content, it could be siblings to the <h1> or you could place all of your content in a content container of some sort to do any positioning.

A little CSS magic is happening here for the added height of the banner as well as the centering of the text. That's not important for this demo, but if you're curious, it exists in the CodePen.

Step 2: Add the overlay element dynamically with ::after

Natively, CSS gives us the powerful ::before and ::after elements for adding stylistic content to the page that shouldn't affect markup.

(Video) How to create a simple CSS image overlay with ::before or ::after

By apply ::before or ::after to an element, you can insert a dynamic element into the DOM before or after the selected elements children.

One important note, all pseudo-elements require a content CSS property to display. In our case, this will just be a blank string.

Use CSS ::before and ::after for simple, spicy image overlays (2)
.banner::after {
content: ""; // ::before and ::after both require content
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(120deg, #eaee44, #33d0ff);
opacity: .7;
}

Now we have an element that is full-width and -height. To do this, we utilize absolute positioning, as we don't want to affect the content flow of the document.

We make the overlay slightly transparent utilizing the opacity property.

In this example, I chose a fun gradient, but you could use a simple background color or even another image to overlay.

Step 3: Fix z-index issues

The keen-eyed observer would notice that something isn't quite right in the example. Our friendly overlay is covering not just the background image, but also the text in the banner.

By using absolute positioning, we've actually put the overlay on top of the stacking context of our banner. To fix this, your overlay and your content will need to have a z-index applied to them. I usually give the overlay a 1 and my content 100.

.banner::after {
...
z-index: 1;
}
.banner > * {
z-index: 100;
}

And with that we have a finished overlay.

Use CSS ::before and ::after for simple, spicy image overlays (3)

Bonus step: Advanced overlays with blend modes

Use CSS ::before and ::after for simple, spicy image overlays (4)

I've been toying with background blend modes for a little while now, but it blew me away when I discovered mix-blend-mode. This allows a developer to blend multiple elements together!

(Video) Image Hover Text Overlay Effect with HTML & CSS - Web Design Tutorial

Use mix-blend-mode on your overlay and you've got some fun new combinations to try out.

.banner::after {
/* opacity: .7; */
mix-blend-mode: color;
mix-blend-mode: hue;
mix-blend-mode: hard-light;
}

The support for various blend modes are pretty weak in the Microsoft browsers, but you can still use them today with clever progressive enhancement. If you want them to be built in Edge, you can let Microsoft know about your passion here.

Until that time, let's use @supports queries to make sure our code still respects our friends using Edge and IE. The above code removes the transparency from our overlay and lets the blend mode do it for us. Instead of removing it, let's negate it behind a support query.

.banner::after {
opacity: .7;

@supports (mix-blend-mode: hue) {
opacity: 1;
mix-blend-mode: color;
mix-blend-mode: hard-light;
mix-blend-mode: hue;
}
}

This way in browsers that don't support blend modes, we get our average, but nice overlay and in browsers that do, we get some really neat effects on our banner.

Bonus Step 2: Turn the overlay's design to 11 with ::before and skew!

Use CSS ::before and ::after for simple, spicy image overlays (5)

So, we have a full width overlay. Then, we took it even further with blend modes. Can we turn it all the way up to 11?

As it turns out, we can add a second overlay using a ::before pseudo element, as well.

Starting with the code we have before, we're going to modify our original overlay to be skewed and centered.

(Video) How To Overlay One Div Over Another Div or Image Using HTML & CSS

Using a CSS transform, we can skew the element a number of degree or turns. In our example, we'll skew it 15 degrees using transform: skew(15deg). You'll notice it now overflows the left and right sides of the container. To fix this, we'll do two things.

First, we'll apply overflow: hidden to our banner element. This will guarantee that we never have overflow from any transforms we do on our pseudo elements. Then, we'll adjust the width from 100% down to 75% to contain the element a little better.

Use CSS ::before and ::after for simple, spicy image overlays (6)

Those of you with a discerning eye will notice this is a little awkward still. The background isn't centered! Since this is an absolutely positioned item, we'll center it with a simple CSS trick.

Instead of a left value of 0, we'll use 50%. That pushes the element over to start it's left edge from the 50% mark of the parent container. We can then use another transform value to pull the element back left: translateX(-50%). When using the translate method, the percentages are based on the width of the element you're applying it to. In this case, it's 50% the width of the ::after element. This creates a perfectly centered element that is position: absolute;. Handy!

Your code should now look like this:

.banner {
overflow: hidden;
}

.banner::after {
content: ""; // :before and :after both require content
position: absolute;
width: 75%; // Makes the overlay smaller to accommodate the skew
height: 100%;
top: 0;
left: 50%; // Push the element 50% of the container's width to the right
transform: skew(15deg) // Puts the element on an angle
translateX(-50%); // Moves the element 50% of its width back to the left
background-image: linear-gradient(120deg,#eaee44,#33d0ff);
}

Use CSS ::before and ::after for simple, spicy image overlays (7)

This itself is a fun take on this design pattern, but we're going to move it one more step.

(Video) Learn CSS Pseudo Elements In 8 Minutes

Let's create an identical pseudo element using ::before. To do this, we're going to add the selector to our ::after block.

Your selector should look like this:

.banner::after, .banner::before {
...
}

This will handle the creation, positioning, and base styles for the element.

Then, we override the specific pieces we need to override. In this case, we'll change our skew.

.banner::before {
transform: skew(-15deg)
translateX(-50%);
}

When we do this, we also have to redeclare the translateX method. This is because we redeclared the whole transform property. If we didn't, the browser would assume we don't have a translateX for the ::before due to the cascade. This is fixed in the latest transform specification, giving CSS individual transform properties, but that's not cross-browser compliant yet.

Use CSS ::before and ::after for simple, spicy image overlays (8)

That's it. We now have two overlays that are creating an interesting geometric view at their intersection!

Here's the final code:

(Video) Simple CSS Color Overlay For Background Images

.banner::after, .banner::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: skew(15deg)
translateX(-50%);
width: 75%;
height: 100%;
background-image: linear-gradient(120deg,#eaee44,#33d0ff);
background-color: #333;
opacity: .7;
}

.banner::before {
transform: skew(-15deg)
translateX(-50%);
}

.banner {
overflow: hidden;
}

Overlays should be simple and clean and never bloat your HTML with additional markup. This is one of my favorite uses of ::after elements. It just makes so much sense.

If you want to play with the code in this tutorial, the CodePens are embedded below:

FAQs

How do you overlay an image in CSS? ›

In short, CSS overlay effects are achieved by using the following: background-image and background CSS properties to add image and linear-gradient overlay effect. position:absolute , top , bottom , right , left CSS properties to control the position of overlay image or text.

How do I make an overlay in CSS? ›

One of the ways of creating an overlay is by absolutely positioning an HTML element on the page. We create <div> element in the markup then position it absolutely with the position property. After it, we give the <div> high z-index value to make it on top of all other elements on the page with the z-index property.

How do I display an image before CSS? ›

Approach: The ::before pseudo selector places the background image before the selected element and if the selected element has a background color associated with it, we can use the z-index property to make the background image visible. Example: HTML.

How do you overlay a div with an image in CSS? ›

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).

What is overlay effect in CSS? ›

Overlay means to cover the surface of something with a coating. In other words, it is used to set one thing on the top of another. The overlay makes a web-page attractive, and it is easy to design. Creating an overlay effect means to put two div together at the same place, but both will appear when required.

How do I overlay two images in HTML? ›

A common method is to use a colored overlay over a linked image.
...
Create HTML
  1. Use <h1> and <h2> for titles.
  2. Use two <div> elements for the original image and overlay image.
  3. Add another <div> for the overlay image inside the second one.

How do you overlay objects in HTML? ›

To overlap or layer HTML elements: Set the position of the elements to relative , absolute , or fixed . Then, use z-index to specify which element is on top or below.

How do you make a div Overlay in HTML? ›

By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div . z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index . Note that this property only works with positioned elements.

How do I overlay color on an image in CSS? ›

Use mutple backgorund on the element, and use a linear-gradient as your color overlay by declaring both start and end color-stops as the same value.

What is :: before and :: after in CSS? ›

The ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.

What is :: before in CSS? ›

::before. In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property.

How do I put an image before text in HTML? ›

To insert an image in HTML, use the image tag and include a source and alt attribute. Like any other HTML element, you'll add images to the body section of your HTML file. The HTML image element is an “empty element,” meaning it does not have a closing tag.

How do I put two images on top of each other in CSS? ›

How To Position One Image On Top Of Another Image Using CSS

How do I make an overlay? ›

How to make a Twitch overlay
  1. Open Canva. Open up Canva and search for "Twitch Overlay." Decide on a design theme or focus for your Twitch overlay. ...
  2. Pick an overlay template. ...
  3. Customize with different graphic elements. ...
  4. Add animations and effects. ...
  5. Download and import to your live streaming software.

How do I bring a div in front of another div? ›

Use the CSS z-index property. Elements with a greater z-index value are positioned in front of elements with smaller z-index values. Note that for this to work, you also need to set a position style ( position:absolute , position:relative , or position:fixed ) on both/all of the elements you want to order.

How do I overlay color on an image in CSS? ›

Use mutple backgorund on the element, and use a linear-gradient as your color overlay by declaring both start and end color-stops as the same value.

How do I overlap a div in CSS? ›

Add CSS
  1. Specify the width and height of the "container" class. Set the position to "relative" and add the margin property.
  2. Set both the width and height of the "box" class to "100%". Specify the position with the "absolute" value. ...
  3. Style the "overlay" class by using the z-index, margin and background properties.

How do I overlay the background color of a picture? ›

HTML & CSS - How to Add a Color Overlay to a Background Image

How do I make a background image opaque in CSS? ›

There's no CSS property that you can use to change the opacity of only the background image. Unlike background colors, which allow you to adjust the alpha channel to control opacity, it simply doesn't exist for the background-image property.

Videos

1. How to write text on image using HTML and CSS
(webseotips)
2. How to add gradient overlays to your images with CSS
(Alex Carpenter)
3. How to Overlay Two Divs with CSS (CSS GRID).
(TomDuffyTech)
4. Image Animation Effect with Animated Fog overlay using CSS
(Invention Tricks)
5. How to use CSS object-fit to control your images
(Kevin Powell)
6. Image Transparent Overlay Effects Animation on Hover in CSS
(Thapa Technical)
Top Articles
Latest Posts
Article information

Author: Trent Wehner

Last Updated: 01/05/2023

Views: 6646

Rating: 4.6 / 5 (76 voted)

Reviews: 91% of readers found this page helpful

Author information

Name: Trent Wehner

Birthday: 1993-03-14

Address: 872 Kevin Squares, New Codyville, AK 01785-0416

Phone: +18698800304764

Job: Senior Farming Developer

Hobby: Paintball, Calligraphy, Hunting, Flying disc, Lapidary, Rafting, Inline skating

Introduction: My name is Trent Wehner, I am a talented, brainy, zealous, light, funny, gleaming, attractive person who loves writing and wants to share my knowledge and understanding with you.