In this post, I’ll show you how to create a simple CSS overlay such as the one pictured below:
Create an Inner <div> and Outer <div>
In your HTML file, you’ll want to create an outer <div> and an inner <div>. The outer <div> will appear on page load, and the inner <div> will appear on hover.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <meta charset="utf-8"> <title>How to Create a CSS Overlay</title> <link rel="stylesheet" href="stylesheets/style.css"> </head> <body> <div id="outer-box"> <img src="cartagena.jpg"> <div id="inner-box"> <p>This is the overlay!</p> </div> </div> </body> </html> |
CSS
In your CSS file, you’ll want to set the outer <div> to position: relative, while the inner <div> should be set to position: absolute. The inner <div> should be set to top: 0 and left: 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.
I originally coded this in SASS, so I’ll include both the SASS and compiled CSS below:
SASS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$pink-color: #FD8698; #outer-box { width: 300px; height: 194px; display:block; position:relative; img { width: 300px; height: auto; } #inner-box { background: $pink-color; height: 100%; width: 100%; opacity: 0; top: 0; left: 0; position: absolute; padding: 0; transition: opacity .5s; p { color: #fff; line-height: 150px; font-family: 'arial'; text-align: center; } } &:hover { #inner-box { opacity: .9; transition: opacity .5s; } } } |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
/* line 3, ../sass/style.scss */ #outer-box { width: 300px; height: 194px; display: block; position: relative; } /* line 9, ../sass/style.scss */ #outer-box img { width: 300px; height: auto; } /* line 14, ../sass/style.scss */ #outer-box #inner-box { background: #FD8698; height: 100%; width: 100%; opacity: 0; top: 0; left: 0; position: absolute; padding: 0; transition: opacity .5s; } /* line 25, ../sass/style.scss */ #outer-box #inner-box p { color: #fff; line-height: 150px; font-family: 'arial'; text-align: center; } /* line 34, ../sass/style.scss */ #outer-box:hover #inner-box { opacity: .9; transition: opacity .5s; } |
You can also view this code on GitHub.
Koren Leslie Cohen
Latest posts by Koren Leslie Cohen (see all)
- How to Transition into Product Management - December 26, 2017
- What I’ve Learned in My First Few Months as a Product Manager - October 14, 2015
- Front End Engineer Interview Questions - July 20, 2015
Argenis says
February 12, 2015 at 2:27 amExcelente tutorial, algo fuera del tema, ¿tienes alguna experiencia con ember.js y qué opinas?
nicolas says
February 4, 2016 at 10:21 amI love you Koren, you’re genius, it works 😉
Many thanks to share it.
I will send you the result as soon as my project will be on line.
Koren Leslie Cohen says
February 4, 2016 at 11:52 pmRight on!
Sajo says
March 24, 2016 at 12:42 pmthanks for code, this is what i was looking for
Micrathene says
August 12, 2016 at 7:17 amOh wow, this is the first solution that is both easy and working for me!
Thanks a bunch for the guide, I appreciate it 🙂
Koren Leslie Cohen says
August 16, 2016 at 7:50 pmYou’re welcome!
Christian O Webb says
July 18, 2018 at 6:47 pmWhat would be the best way of going about rounding the corners of the overlay?
Great Post btw! The only one I could find that worked!