css - 用于旋转 slider 的图像悬停 CSS

Question

我正在使用旋转 slider ，但遇到了一个问题。作为示例，我使用此处的原始演示:https://revolution.themepunch.com/wordpress-photography-slider .

在“作品集”选项卡上，您会看到图像随着过渡而缩小，并且当您将鼠标悬停在它们上方时看起来有点暗。这也是我想要的，但我不知道怎么做。

在 revolution slider 中，您可以将类、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) 上时，包含图像 (.img-wrap) 的 div 会被 css -webkit-transform 缩小 70%:规模(0.7)；

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

-webkit-transition:所有 .5s 缓入缓出；提供平滑的过渡效果。

如果您想知道为什么同一件事有 5 行不同的 css，那是因为每一行都针对特定的浏览器。 -o- 是 opera，-moz- 是 firefox 等。

另外，请确保更改 .slider-img 宽度以满足您的需要。

查看 js fiddle 上的工作示例:

here