Adding an overlay color on hover to a background image

Question

I know this is a super basic concept but I'm going around in circles. I have a background image with text on top. So the image is the parent element. When the user hovers over the image, I want there to be a black gradient that is darker than the initial one I used, so that the image still shows and the text is still clear.

I have tried using z-index, only using background color, removing opacity. Just about everything. When I hover, the h1 and p text gets covered and the hover color is white/grey and not black.

This is the code I'm using for the hover:


.image { 
    position: relative; 
    width: 100%;
    max-width: 900px;
    margin: auto;
    background: linear-gradient(180deg, rgba(38, 36, 36, 0.47) 0%, rgba(38, 36, 36, 0) 100%), url(/assets/img/pictures/feature.png);
    background-size: cover;
}

.image:hover{
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: rgba(0, 0, 0, 0.5);
    opacity: 0.4;
    }

<div class="image overlay blog-page" style="margin-bottom: 75px;">
    <h1 class="article">Featured Page</h1>
    <div class="row" style="margin-left: 24px;">
        <div class="col-xs">
            <img class="author-image" src="/assets/img/pictures/test.png"></img>
        </div>
        <div class="col-xs">
            <p class="article-content banner-text author">Test</p>
        </div>
</div>
</div>

Am I missing something very obvious? Any help would be appreciated.

Plz, share your HTML also. How will we know which `h1` and `p` get covered? — Manas Khandelwal, Jan 14 '21 at 18:49
You're missing an ending `}` on `.image`. When I added it, it works just fine. — JakeAve, Jan 14 '21 at 18:55
@JakeAve It must have been deleted when copying my code but it's in my css and still not working - thank you for the suggestion — Elektra Murphy, Jan 14 '21 at 19:00
Your `h1` is inside of the `div` with the "image" class, so it's also having the .4 opacity applied. — JakeAve, Jan 14 '21 at 19:09
@JakeAve it has to be because the text is on top of the image. The opacity: 0.4 works, but what I need is for a darker color gradient over the background image URL when hover occurs. This is what I am trying to achieve here: background: rgba(0, 0, 0, 0.5); The reason is because opacity causes a lighter appearance, whereas I want a darker one — Elektra Murphy, Jan 14 '21 at 19:15
You can use two approaches. 1.https://codepen.io/manaskhandelwal1/pen/mdrQGWj 2. https://codepen.io/manaskhandelwal1/pen/YzGROdJ — Manas Khandelwal, Jan 14 '21 at 19:18
The question was removed so I was not to add the answer but I have posted the links to codepen. You can take a look there. — Manas Khandelwal, Jan 14 '21 at 19:20

score 2 · Answer 1 · answered Jan 14 '21 at 19:15

First: Image <img> is an empty tag. It has not closing tag and also does not need a slash at the end as it is an empty tag.

The easiest solution would be to use an overlay div that spans the entire block and will be displayed during hover. For that, use the same approach as the snippet below.

You add a box with the the attribute and value: position: absolute; top: 0; bottom: 0; left: 0; right: 0;

Then you hide it with display: none; and using the :hover selector to change it to display: block; during hover.

.image {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: auto;
  background: linear-gradient(180deg, rgba(38, 36, 36, 0.47) 0%, rgba(38, 36, 36, 0) 100%), url(/assets/img/pictures/feature.png);
  background-size: cover;
}

.image .image-overlay {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
}

.image:hover .image-overlay {
  display: block;
}

<div class="image overlay blog-page" style="margin-bottom: 75px;">
  <h1 class="article">Featured Page</h1>
  <div class="row" style="margin-left: 24px;">
    <div class="col-xs">
      <img class="author-image" src="/assets/img/pictures/test.png">
    </div>
    <div class="col-xs">
      <p class="article-content banner-text author">Test</p>
    </div>
  </div>
  <div class="image-overlay"></div>
</div>

I agree, you want the overlay to be totally separate from your text content so it can act and change the opacity independently. — JakeAve, Jan 14 '21 at 19:22

Adding an overlay color on hover to a background image

1 Answers1