Skip to main content
X

Explore your training options in 10 minutes

How to Create a Basic CSS Overlay

Christina Kopecky - December 29, 2020


An overlay is an effect used on a website to steer users in the right direction of the next action they must take. Correct usage has the ability to create a positive user experience, which will keep users on your website.

There are a number of ways to create an overlay. There’s no one right way – it’s all about choosing the way that works best for your site and what you need.

In this guide, we’ll focus on using basic HTML and CSS (no JavaScript) to get the overlay effect you are looking for when hovering over an image.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

Block Out Your HTML

Let’s create your HTML boilerplate that will be used to create our image overlay:

<html>
	<head>
		<style>
			/*No CSS to display yet*/
</style>
</head>
<body>
	<div class="container" ></div>
</body>
</html>

Understand the Problem

When attempting something new the first time, you should sit back and think about how the problem should be solved before consulting a search engine. When you have a solid understanding of how the overlay works and what we need to do, you will have better luck at looking up hints and tips, if needed.

As a recap, an overlay goes over a container (in our instance, an image) and does something to the image when we hover over it. This directs the user to interact with the site.

Moving forward, think big picture – don’t try to pour over all the minute details of how to do this. We have an image and we have an overlay – that is at least two containers. And those two containers need to be in a bigger container.

Don’t try to style anything yet – work purely on the HTML and code it up. See if you can block it out on your own before taking a look at the markup below:

		<html>
	<head>
		<style>
			/*No CSS to display yet*/
</style>
</head>
<body>
	<div class="container" >
	<div class="overlay-outer>
	<img class="item-to-overlay" src="file-here" alt="this-is-our-image" />
<div class="overlay-inner">
	This is our overlay div.
</div> 
</div>
</div>
</body>
</html>

Once we have the main blocks figured out, we can work on the styling. I like to start from the outside/bigger containers and work my way into the smaller containers. It helps keep track of the actual widths of the container. You may find you prefer to start from the inside and work your way out – that’s totally fine, too. Follow along with me below.

Body

Starting from the outside and working our way in, we come to the body tag first – it’s the biggest container on the page and holds our page. Here you can set a background color, margin, and the width and max-width of the application:

<style>
	body {
		background-color: gray;
		max-width: 800px;
		width: 100%;
}
</style>

Div.container

The next container we come to is our first div. This one is fairly straightforward. We just want it’s width to be 100%.

<style>
	body {
		background-color: gray;
		max-width: 800px;
		width: 100%;
margin: 0 auto;
}
div.container {
	width: 100%;
}
</style>

Div.overlay-outer

As we dive into the markup, the next <div> we come to is the one with class=”overlay-outer” . Here is where we need to start thinking about the styling of our overlay.

The first thing we need to do is make definitions for the container that the image and the overlay will be in. How much of the webpage’s width do we want our overlay container to take up? What about the height? This is also the <div> where we need to establish our “fence” for our image. So we need to add a position property to the element:

<style>
	body {
		background-color: gray;
		max-width: 800px;
		width: 100%;
margin: 0 auto;
}
div.container {
	width: 100%;
}
div.overlay-outer {
	width: 50%;
	height: 400px;
	position: relative;
}
div.
</style>

CSS Overlay combines a lot of the stuff we have learned so far in CSS: positioning, background-color, opacity, object-fit and divs. After styling the outer overlay container, we need to take a look at the image and the inner overlay container.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Img

The image element needs to match the width and height of the container it sits in. This is also the place to put a border if you’d like, and to crop your image.

Div.overlay-inner

The inner overlay <div> and its styles concern the actual look of the overlay. This is where you will choose your background color for your overlay, set the opacity to 0. Most importantly, we need to add a position: absolute,  top:  0 and left: 0 so that the overlay-inner div will situate itself on the <div> that is set to position: relative.

Div.overlay-inner p

Here we style the actual contents of the overlay container.

Div.overlay-outer:hover .overlay-inner

Finally, we are going to put a :hover pseudo-class on our outside overlay container so that the overlay will show when we mouse over it:

.outside:hover .inside {
  opacity: .8;
  transition: opacity .5s;
}

Setting the opacity between 0 and 1 allows for the background-color assigned to the inner overlay div to be translucent. The transition property makes it a smooth transition from opacity 0 to opacity 8.

You’ve now successfully created a CSS overlay. Congratulations!

Using CSS and HTML is one of several ways you can create an overlay for an element. For this solution, we used several properties from CSS to assist: transition, position, object-fit, width, height and more.

In this article, we also learned how to approach our problem, how to block our HTML and then how to style the CSS for our overlay effect. In the code editor below is a working example of the points covered here:

<html>
<head>
	<style>
			* {
  				box-sizing: border-box;
}

body {
  background: grey;
  max-width: 800px;
  height: 1000px;
}

.outside {
  width: 75%;
  height: 400px;
  display: inline-block;
  position: relative;
  cursor: pointer;

}


.images {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border: 5px double black;
}

.inside {
  background-color: #9c1203;
  height: 100%;
  width: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  position: absolute;
  padding: 0;
}

.inside p {
  color: #fff;
  line-height: 150px;
  font-family: 'arial';
  padding: 20px;
  text-align: left;
}

.outside:hover .inside {
  opacity: .8;
  transition: opacity .5s;
}
</style>
</head>
<body>
	<div class="container" >
    		<h1>CSS Overlay</h1>
	<div class="overlay-outer>
	<img  class="images" src="https://images.unsplash.com/photo-1548630826-2ec01a41f48f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3367&q=80" /> alt="this-is-our-image" />
<div class="overlay-inner">
	<p>This is an overlay!</p>
</div> 
</div>
</div>
</body>
</html>

Take the time to play around with the markup to see if you can make your own version of this overlay.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content