Color overlay on hover image

Question

I have a banner that's looking like this:

My HTML looks like this:

<div class="about centered" style="background: url('/img/about-bg1.jpg') no-repeat center center;">
    <h2 class="head">Solden bij Lattoflex</h2>
    <a href="#" class="about__more">MEER INFO</a>
</div>

My CSS looks like this:

.about {
    margin-bottom: 10px;
    background-size: cover;
    padding-top: 90px;
    padding-bottom: 62px;
    text-align: center;
}

.centered {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
}

But when I hover on it I would like to have something like this:

So I want an orange overlay color when I hover on the box. I also would like to have the full box be clickable and not only the a element.

But I'm really stuck with the hover on image color overlay. I also know it's not good to place elements in a element. So how can I make it fully clickable?

Answer 1

Use a pseudo element, like ::before.

The important part here is the .about > * { position: relative; } rule, which will keep the inner elements on top of the pseudo.

.about {
  margin-bottom: 10px;
  background-size: cover;
  
  padding-top: 90px;
  padding-bottom: 62px;
  text-align: center;
}
.centered {
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
}
.about > * {
  position: relative;
}
.about:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #f00;
  opacity: 0.7;
  mix-blend-mode: multiply;
}
.about:hover > * {
  color: white;
}

<div class="about centered" style="background: url(https://i.sstatic.net/tVDnT.jpg) no-repeat center right;">
  <h2 class="head">Solden bij Lattoflex</h2>
  <a href="#" class="about__more">MEER INFO</a>
</div>

---

Updated

To have the full box clickable, simply move the anchor outside everything, and e.g. use a span in its place

.about {
  margin-bottom: 10px;
  background-size: cover;
  
  padding-top: 90px;
  padding-bottom: 62px;
  text-align: center;
}
.centered {
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
}
.about > * {
  position: relative;
}
.about:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #f00;
  opacity: 0.7;
  mix-blend-mode: multiply;
}
.about__more {
  text-decoration: none;
}
.about__more .head {
  color: black;
}
.about__more span {
  text-decoration: underline;
}
.about:hover > * {
  color: white;
}

<a href="#" class="about__more">
  <div class="about centered" style="background: url(https://i.sstatic.net/tVDnT.jpg) no-repeat center right;">
    <h2 class="head">Solden bij Lattoflex</h2>
    <span class="about__more">MEER INFO</span>
  </div>
</a>

Answer 2

Logic: Simply add an overlay div inside your image holder div and make the overlay div absolute with css properties like I have mentioned below.

If the height of your image is not fixed, you might have to use Javascript to dynamically calculate height.

Find the demo here

Note: The text in the demo appear overlapped because I have used the wireframe image that already has the text. Should not be a problem when you implement it on the right image.

HTML:

<div class="about centered" style="background: url('/img/about-bg1.jpg') no-repeat center center;">
    <h2 class="head">Solden bij Lattoflex</h2>
    <a href="#" class="about__more">MEER INFO</a>
    <div class="dimension overlay"><div>
</div>

CSS:

.about {
    margin-bottom: 10px;
    background-size: cover;
    padding-top: 90px;
    padding-bottom: 62px;
    text-align: center;
}

.centered {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
}

.dimension{
    width: 100%;
    height: 240px;
}
.overlay{
    z-index: 1;  
    position: absolute;
    top: 0;    
}
.overlay:hover{ 
    background-color: rgba(255,100,0,0.62);
}

Answer 3

Man, I would tell you to make two images and use the 'a' tag for the whole div, like:

<a href="#" class="about__more about centered" id="id-for-some-js-event">
   <h2 class="head">Solden bij Lattoflex</h2>
   MEER INFO
</a>

<style>
 .about {
   margin-bottom: 10px;
   background-size: cover;
   padding-top: 90px;
   padding-bottom: 62px;
   text-align: center;
   background-repeat:  no-repeat center center;
   background-position: center;
   background-image:  url('/img/about-bg1.jpg');
   transition: all .3s ease-in;
   /*  transition faz com que a mudança não seja bruta...  */
  }

 .about:hover {
   background-image:  url('/img/about-bg1-red.jpg');
 }
 .centered {
   margin: 0 auto;
   max-width: 1200px;
   position: relative;
  }

</style>

Answer 4

Here you go, no js needed (had to guess for the color, so you'll need to redo that, and I had to hide the actual a-text and h2 for it to work properly): https://jsfiddle.net/vwody2Lj/

h2 {
  color: transparent;
  display: none;
}
.about {
    background-size: cover;
    text-align: center;
    height: 15em;
}

.centered {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
}
.about.centered a {
  color: transparent;
  display: block;
  height: 100%;
}
.about.centered a:hover {
  background: rgba(255,0,0,0.3);
}

<div class="about centered" style="background: url('https://i.sstatic.net/cJ7gy.png') no-repeat center center;">
    <h2 class="head">Solden bij Lattoflex</h2>
    <a href="#" class="about__more">MEER INFO</a>
</div>

Answer 5

You can accomplish this by using the css blend mode "background-blend-mode: multiply;" and a hover selector.

.about {
    margin-bottom: 10px;
    background-image: url('https://i.sstatic.net/cJ7gy.png');
    background-color: red;
    background-size: cover;
    padding-top: 90px;
    padding-bottom: 62px;
    text-align: center;
  
}

.centered {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
}

.about:hover {
  background-blend-mode: multiply;
}

<div class="about centered">
    <h2 class="head">Solden bij Lattoflex</h2>
    <a href="#" class="about__more">MEER INFO</a>
</div>

Answer 6

You should be able to use a background on a child element of the div with the background image. The 0.82 is the transparency of the background. Kinda like this:

<div class="centered" style="background: url('/img/about-bg1.jpg') no-repeat center center;">
    <div class="about">
        <h2 class="head">Solden bij Lattoflex</h2>
        <a href="#" class="about__more">MEER INFO</a>
    </div>
</div>

.about:hover {
    background: rgba(39,62,84,0.82);
}