悬停图像上的颜色叠加 [英] Color overlay on hover image

问题描述

我有一面这样的横幅:

我的HTML看起来像这样:

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>

我的CSS看起来像这样:

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:

因此，当我将鼠标悬停在盒子上时，我想要一个橙色的覆盖色.我还希望整个框都可以单击，而不仅仅是a元素.

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?

推荐答案

使用伪元素，例如::before.

这里的重要部分是.about > * { position: relative; }规则，该规则将内部元素保留在伪元素的顶部.

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.stack.imgur.com/tVDnT.jpg) no-repeat center right;">
  <h2 class="head">Solden bij Lattoflex</h2>
  <a href="#" class="about__more">MEER INFO</a>
</div>

已更新

要使整个框都可单击，只需将锚点移到所有内容之外，例如在其位置使用span

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.stack.imgur.com/tVDnT.jpg) no-repeat center right;">
    <h2 class="head">Solden bij Lattoflex</h2>
    <span class="about__more">MEER INFO</span>
  </div>
</a>

这篇关于悬停图像上的颜色叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！