How To Create Static and Responsive CSS Overlays

CSS overlays explained

A CSS overlay is any color, shade, image, or effect that a front-end developer may apply to an element and pseudo elements being rendered in the browser by CSS. You’ve undoubtedly experienced them. If they’re applied correctly, they can be both visually appealing as well as informative. Let’s take a look at a few different kinds of overlays and how they can be useful in your web development.

Statically positioned overlay

Images are everywhere online, and for good reason. They inform, entertain, and add to the beauty of our browsing experience. Of course, not all images are perfect right out of the box. For example, some images are so colorful or striking that they distract from important content to be displayed on the page for visitors. In this case, a static overlay with a light gray or a matching theme color with a bit of opacity would be very helpful in toning down the image. We might call this an absolutely positioned overlay. 

To create an overlay, let’s begin inside our HTML element in our index.html to develop our webpage. First, create a div and apply it to that div class overlay inside of the body HTML. Below that, you can place anything you like including text or even an image to create an image overlay. However, that’s all we need in our HTML page to create a basic static overlay — a div with a class of overlay and something for it to be applied to. Now, let’s transition to some CSS.

You could apply these stylings inline or even in the header, but of course, it is a best practice to abstract them away into their own “styles.css” file and then import them. Regardless, let’s begin by selecting our HTML and body elements, entering the attribute “min-height”, and giving it the relative value of “100%”. That’s because, for our purposes, we only want the entire document to be as big as the element that we’ve entered to have the overlay.

Next, we should use the body selector to apply CSS styling to our body only. Let’s use the position property because it specifies the type of positioning method used for an element. In our case, we want a relative position because that ensures it is positioned relative to its normal position. Remember that all of these are inherited by child elements, so we’re lining this up for the one and only element in the document right now. 

Finally, we’re ready to style our overlay so that it completely covers whatever element is below it in our HTML file. Begin by selecting it using the class selector and “overlay”. We should give it a position of absolute because we want this overlay to go absolutely everywhere that we tell it to go. We want the overlay to begin at the top with a value of 0 and the left with a value of 0 so that it starts in the top left-hand corner of the screen. Set width 100% and height 100% so that it entirely fills up its body parent element as well as anything below it. We should also give it a z-index of something greater than 1 so that it’s definitely placed closer to the user and on top of any other element. Finally, we should define the background color using RGBA with the first four values used as the color — like (0,0,0) for black — and the final fifth value as opacity percentage.

Your final code might look like the below:

Now it’s your turn to have some fun! Start by changing the color. Then experiment with other attributes! It won’t hurt! You could make it even cooler by following this In-Depth Tutorial on Using CSS Transform to Rotate Text  with an overlay.

Image overlay effects

Now that we’ve established the very basics of an overlay, we should probably discuss how to create useful overlays. One of the very best overlay effects uses a background image and the pseudo element:hover to display some useful information once the image has attracted the attention of a user. The overlay could contain some more information, a call to action, or whatever else you can imagine. Let’s get to work on a travel tooltip overlay!

This time, inside our HTML document, we’ll need at least three elements inside our body. 

1. A div with a class of “container” that contains the following two elements:
2. An <img> with a “src” source of whatever you’d like, and don’t forget an “alt” tag to describe it!
3. Lastly, another div element with a class of “overlay” and some text between the opening and closing tags.

That’s it! Our HTML is complete. Time for some styling. Again, you’re free to use inline styling in the header or importing a style sheet.

First and foremost, since we’ll be using images and text, let’s ensure that all of the elements begin with some default settings. We’ll use the all selector “*” and give the property box-sizing the value of the border-box. This will square up all images and text elements and take into account a few pixels for the border by default. 

Next, we should style our container div element. It should have a position with a value of relative so that it can move around with the screen and other elements. Also, let’s declare a width of this container at 300px. Setting the width of the container now will keep all of the other elements inside of it “contained” inside of the container, right? 

Now we’re ready to style the image element. Select it in CSS using the universal selector img and then open up some curly braces for some properties and values. We should give it the property of display and the value of block — not flexbox or grid — to make it responsive across multiple viewports and give wider browser support. Let’s also name the width 100% and height as auto to ensure we’re using relative units for this picture.

Time to style our overlay element! Use the class selector and name the “overlay” that we described before in our HTML document. Again, we want it to have a position of absolute because we want this element to go absolutely exactly where we tell it to go. Different this time, however, we’re going to give its prime location as bottom and a value of 0, so it’s near the bottom of our image when we want to see the overlay. Next, we’ll describe the color just like before using RGBA like (0, 0, 0, 0.5) for black at 50% opacity. On that black background, we should use a color property to name our font white. We’ll also want that informative text in the middle so let’s use the property ‘text-align’ with the value of ‘center’ so that it is presented cleanly in the middle. We should also want some potentially larger font-size to make the text more readable. Don’t forget some padding around the text area just for great styling! Importantly, we’ll want this overlay to have a width of 100% so that it extends all the way across but not all the way to the top of the image. 

We’re not done styling the overlay just yet! Let’s also add a transition with two values — first 0.5s to represent a half-second transition and then “ease” to name the type of transition we would like to be rendered for our users. Also, and this may seem counterintuitive, but we want to give this element an opacity of 0 to make it disappear! “But WHY?” you may ask. Because we still need to create one more style to make this informative overlay effect appear once the mouse has hovered it.

Finally, let’s create our very last style on the sheet. We want to select the container element using the pseudo-class: hover and its child element overlay. That should look like `.container:hover .overlay` followed by curly brackets. Inside of those curly brackets, let’s invoke the property opacity and give it a value of 1. Now, if the user is hovering over the image, the opacity changes from 0 to 1, revealing the overlay with an ease transition over the course of half a second! 

Your code should look like the below:

Conclusion

You already knew that overlays were both useful and everywhere, but now you know how easy they are to make! It really is just a matter of isolating the element you need to obstruct and then placing another element on top of it relative to the first. From there, you can apply images, text, colors, shapes, or anything else that you can think of! Good luck, and have fun developing with overlays. Of course, you could always learn some JavaScript to make your web applications even more powerful. Overlays and other visual effects are an excellent way to demonstrate your coding prowess on front-end applications. You can always learn more about other elements by taking valuable CSS courses to enhance your web pages and further your expertise.