[英]Color overlay on hover image
I have a banner that's looking like this: 我有一面这样的横幅:
My HTML looks like this: 我的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>
My CSS looks like this: 我的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;
}
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. 我还希望整个框都可单击,而不仅仅是a元素。
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? 那么,如何使其完全可点击?
Use a pseudo element, like ::before
. 使用伪元素,例如::before
。
The important part here is the .about > * { position: relative; }
这里的重要部分是.about > * { position: relative; }
.about > * { position: relative; }
rule, which will keep the inner elements on top of the pseudo. .about > * { position: relative; }
规则,它将内部元素保持在伪元素的顶部。
.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>
Updated 更新
To have the full box clickable, simply move the anchor outside everything, and eg use a span
in its place 要使整个框可单击,只需将锚点移到所有内容之外,例如在其位置使用span
.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>
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. 逻辑:只需在图像持有人div内添加一个overlay div,然后使用我下面提到的css属性就使该div绝对。
If the height of your image is not fixed, you might have to use Javascript to dynamically calculate height. 如果图像的高度不固定,则可能必须使用Javascript动态计算高度。
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: 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: 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);
}
You should be able to use a background on a child element of the div with the background image. 您应该能够在具有背景图像的div的子元素上使用背景。 The 0.82 is the transparency of the background. 0.82是背景的透明度。 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);
}
You can accomplish this by using the css blend mode "background-blend-mode: multiply;" 您可以通过使用CSS混合模式“ background-blend-mode:乘法;”来完成此操作 and a hover selector. 和一个悬停选择器。
.about { margin-bottom: 10px; background-image: url('https://i.stack.imgur.com/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>
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/ 在这里,您不需要js(必须猜测颜色,因此您需要重做,而我必须隐藏实际的a文本和h2才能使其正常工作): 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.stack.imgur.com/cJ7gy.png') no-repeat center center;"> <h2 class="head">Solden bij Lattoflex</h2> <a href="#" class="about__more">MEER INFO</a> </div>
Man, I would tell you to make two images and use the 'a' tag for the whole div, like: 伙计,我要告诉你制作两个图像,并在整个div中使用'a'标签,例如:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.