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

Question

我需要在bxSlider中为图像添加一个黑色叠加层，它会在鼠标悬停时消失，我将如何进行此操作？

我看到的其他答案首先使用.7的不透明度使图像变亮，但是有一种方法可以在鼠标悬停时消失图像上的黑色叠加，类似于以下网站：http://www.renegadecraft.com/ < / p>

谢谢！

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;
}