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.
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.
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.
