Question

我正在使用革命滑块，我遇到了问题。作为示例，我使用此处的原始演示：https://revolution.themepunch.com/wordpress-photography-slider。

在标签'投资组合'上，您会看到图像在过渡时缩小尺寸，当您将鼠标悬停在图像上时看起来有点暗。这也是我想要的，但我无法弄清楚如何。

在Revolution滑块中，您可以为特定图像添加类，ID和CSS，因此我可能需要的是一个CSS代码，使这成为可能。我已经尝试了几个我在网上找到的代码，但没有一个代码可以实现，因为它们都带有一个html部分。

我的猜测是：图像已经存在，我不需要html部分，只需要为图像分配类或id，然后为每个图像提供相同类型的CSS代码。

我是否在正确的轨道上？任何人都可以帮我解决它的代码吗？

非常感谢提前！

Answer 1

添加一个类，然后执行一些css

例如：

<img class="slider-img">

.slider-img:hover {

{

如果您需要css的帮助，请告诉我。

编辑：

试试这个。

将每个图像包裹在2个div，slider-img和img-wrap：

周围

<div class="slider-img">
    <div class="img-wrap">
        <img src="http://science-all.com/images/wallpapers/stock-image/stock-image-15.jpg">
    </div>
</div>

然后做一些css：

.slider-img {
  width: 200px;
  cursor: pointer;
}

.slider-img img {
  width: 100%;
}

.slider-img:hover .img-wrap {
  background-color: black;
  transform: scale(0.7);
  -o-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
}

.slider-img:hover .img-wrap img{
  opacity: 0.5;
}

基本上css正在做的是当你将鼠标悬停在主div（.slider-img）上时，包含图像的div（.img-wrap）会被css -webkit-transform缩小70％：规模（0.7）;

它的背景颜色为黑色，不透明度为80％。这给出了黑暗的图像效果。

-webkit-transition：全部.5s轻松进出;给出了平滑的过渡效果。

如果你想知道为什么同样的东西有5个不同的css行，那是因为每行都针对特定的浏览器。 -o-是opera，-moz-是firefox等。

另外，请务必更改.slider-img宽度以符合您的需要。

查看js小提琴上的工作示例：

here

图像悬停CSS for revolution滑块

1 个答案: