How to make in CSS an overlay over an image?

Question

I am trying to achieve something like this:

When I hover over an image, I would like to put on that image this dark color with some text and the icon.

I am stuck here. I found some tutorials but they didn't work out for this case. Also, another issue -- every image has a different height. The width is always the same.

How can this effect be achieved?

Astir

possible duplicate of How to overlay images – Edessa

Answer 1

You can achieve this with this simple CSS/HTML:

.image-container {
    position: relative;
    width: 200px;
    height: 300px;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

HTML

<div class="image-container">
    <img src="http://lorempixel.com/300/200" />
    <div class="after">This is some content</div>
</div>

Demo: http://jsfiddle.net/6Mt3Q/

---

UPD: Here is one nice final demo with some extra stylings.

.image-container {
    position: relative;
    display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
    position: absolute;
    bottom: 0;
    font-family: Arial;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
}
.image-container .after .zoom {
    color: #DDD;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -19px;
    height: 50px;
    width: 45px;
    cursor: pointer;
}
.image-container .after .zoom:hover {
    color: #FFF;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="image-container">
    <img src="http://lorempixel.com/300/180" />
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom">
            <i class="fa fa-search"></i>
        </span>
    </div>
</div>

Spiroid

But the problem is that I don't know the height of the .image-container. – Astir

I played with it and it seems to be working, thanks dfsq! Just one thing - how could I stick the text always at the bottom of the respective image? Thank you – Astir

I am fighting yet with placing the icon in the middle of the hovered area -- is there any effective way how to put it there? Thx – Astir

By using display:none, you've stopped the ability to use any sort of animation and transition effect, Which I think is an important aesthetic to getting overlays to look good. – Cogwheel

@LukeJonGibson Haha, and that's why this answer is not useful and needs to be downvoted. – Spiroid

@Astir did you find a way to place the text in the middle? – Fabaceous

use <br/> on HTML element as much as you want till satisfied. <div class="after"><br/><br/>This is some content</div> – Gerardogeratology

Answer 2

Putting this answer here as it is the top search result on Google.

If you want a quick and simple way:

filter: brightness(0.2);

*Not compatible with IE

Oraleeoralia

The post is 6 years old and the accepted answer has 100+ votes, some of which are in the past few months. There's nothing wrong with your answer, but perhaps you can expand more as to why your answer might be useful for people reading this in 2020. Is this a new feature of css? – Twentyfourmo

Filter has been around for years. I didn't see it in any of the answers so I thought I could help people who are still navigating to this page for a much quicker solution. – Oraleeoralia

Hopefully it's useful to those who come across it. Your post just had showed up in the "Late Answers" queue. Since it's not really my realm, I think it would be cool to see a little more in your answer as to how this compares to the other answers. Maybe supply a jsfiddle to compare against the top answer. – Twentyfourmo

This is exactly what I was looking for! Thank you. – Straggle

this is a nice additional comment / insight – Pandurate

This is precisely what I needed, thanks! – Animosity

Answer 3

You could use a pseudo element for this, and have your image on a hover:

.image {
  position: relative;
  height: 300px;
  width: 300px;
  background: url(http://lorempixel.com/300/300);
}
.image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.8s;
  opacity: 0;
  background: url(http://lorempixel.com/300/200);
  background-size: 100% 100%;
}
.image:hover:before {
  opacity: 0.8;
}

<div class="image"></div>

Bott

Answer 4

A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.

You could simply use a background-blend-mode

.foo {
    background-image: url(images/image1.png), url(images/image2.png);
    background-color: violet;
    background-blend-mode: screen multiply;
}

What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.

multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.

Timoshenko

This is a great idea. However the main problem is that it requires both images to be background images. If the primary image is an HTML <img />, it doesn't work. Also, at the time, background-blend-mode is not well supported: late versions of Chrome and FF with partial support in Safari (caniuse.com/#search=background-blend-mode) – Mackoff

Answer 5

.bg-img{
  text-align: center;
  padding: 130px 0px;
  width: 100% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);
}

Emir

Answer 6

You can try the following solutions along with psudo elements:

Option 1:

You can use linear-gradient to along with URL with the following properties. Adjust these according to your own.

.bg-img1 {
    background-image: linear-gradient(
    rgba(0, 0, 0, 0.725),
    rgba(0, 0, 0, 0.725)
     ),
    url('https://example.com/image');
}

Option 2:

You can use background-color property along with background blend mode.

.bg-img {
    background-image: 
    url("https://eampleimageurlheree.com/image");
    background-color: rgba(0, 0, 0, 0.725);
    background-blend-mode: "multiply";
}

Endodermis