[英]How to apply a custom color as a transparent overlay for an image?
I am trying to apply the hover
effect shown above. 我正在尝试应用上面显示的
hover
效果。 I only need help with the gold transparent filter where I tried a 100% linear-gradient
when the image is hovered but that does not work. 我只需要金色透明滤镜的帮助,当图像悬停时我尝试了100%
linear-gradient
,但是那不起作用。 I have also tried the filter
property but cannot find a way to add a custom colour instead of using the presets. 我还尝试了
filter
属性,但是找不到添加自定义颜色而不是使用预设的方法。
HTML HTML
<figure>
<a href=#><img src="assets/instagram-1.jpeg" alt=""></a>
<i class="fas fa-search"></i>
</figure>
<figure>
<a href=#><img src="assets/instagram-2.jpeg" alt=""></a>
<i class="fas fa-search"></i>
</figure>
<figure>
<a href=#><img src="assets/instagram-3.jpeg" alt=""></a>
<i class="fas fa-search"></i>
</figure>
<figure>
<a href=#><img src="assets/instagram-4.jpeg" alt=""></a>
<i class="fas fa-search"></i>
</figure>
<figure>
<a href=#><img src="assets/instagram-5.jpeg" alt=""></a>
<i class="fas fa-search"></i>
</figure>
<figure>
<a href=#><img src="assets/instagram-6.jpeg" alt=""></a>
<i class="fas fa-search"></i>
</figure>
</div>
CSS CSS
.footer-col-4 {
width: 21.5rem;
padding-left: 1.75rem;
}
.footer-col-4-images {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer-col-4-images figure:nth-child(-n+3) {
margin-bottom: .75rem;
}
.footer-col-4-images figure {
position: relative;
}
.footer-col-4-images i {
color: #e4e4e4;
position: absolute;
top: 30%;
right: 0;
left: 40%;
bottom: 0;
font-size: 1.4rem;
visibility: hidden;
}
.footer-col-4-images figure:hover {
background: linear-gradient(90deg, rgba(238,176,19,0.5) 100%, rgba(238,176,19,0.5) 100%);
}
.footer-col-4-images figure:hover i{
visibility: visible;
}
You seem to be applying a background color to the figure
but that will be hidden by the image. 您似乎在将背景颜色应用于
figure
但该颜色将被图像隐藏。 Apply the background color to the overlay i
which you then make 100% wide and tall. 将背景颜色应用于覆盖层
i
,然后将其设为100%宽高。 Centering the content of the overlay is simple from there. 从那里开始,使叠加层内容居中很简单。
.wrap { display: inline-block; position: relative; } i.fa { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center; font-size: 2em; color: white; background: linear-gradient(90deg, rgba(238, 176, 19, 0.5) 100%, rgba(238, 176, 19, 0.5) 100%); visibility: hidden; } figure:hover i { visibility: visible; }
<figure class="wrap"> <img src="http://www.placebacon.net/300/210?image=1" alt=""> <i class="fa fa-search"></i> </figure>
If I understand you correctly, you need to set a custom color for the gradient color on hover. 如果我对您的理解正确,则需要在悬停时为渐变颜色设置自定义颜色。
Why don't you add it as an inline style? 为什么不将其添加为嵌入式样式?
<figure style="background-color: linear-gradient(..)">
<a href=#><img src="assets/instagram-1.jpeg" alt=""></a>
<i class="fas fa-search"></i>
</figure>
Or you could add the background-color
as a class and apply a different style to each figure. 或者,您可以将
background-color
作为一个类添加,并对每个图形应用不同的样式。
.footer-col-4-images figure.red:hover {
background: linear-gradient(90deg, rgba(...) 100%, rgba(...) 100%);
}
.footer-col-4-images figure.blue:hover {
background: linear-gradient(90deg, rgba(...) 100%, rgba(...) 100%);
}
<figure class="red">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.