javascript - 如何在 bxSlider 中为图像添加叠加层

Question

我需要向 bxSlider 中的图像添加深色叠加层，该叠加层会在鼠标悬停时消失，我该怎么做？

我看到的其他答案首先使用 0.7 的不透明度使图像变亮，但是有没有办法在图像上覆盖一个深色覆盖层，并在鼠标悬停时消失，类似于以下网站:http://www.renegadecraft.com/

谢谢!

Answer 1

您要找的是image tint

.tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,255,255, 0.5); /* color you want, in this case, probably black */
    -moz-transition: background .3s linear;
    -webkit-transition: background .3s linear;
    -o-transition: background .3s linear;
    transition: background .3s linear;
}

.tint:hover:before {
    background: none;
}