我正在使用旋转滑块，但遇到了问题。作为示例，我使用此处的原始演示：https://revolution.themepunch.com/wordpress-photography-slider。
在“作品集”选项卡上，您会看到随着过渡而缩小的图像，当您将鼠标悬停在它们上方时，它们看起来更暗。这也是我想要的，但我不知道怎么做。
在旋转滑块中，您可以将类、ID 和 CSS 添加到特定图像，所以我可能需要一个 CSS 代码来实现这一点。我已经尝试了几个我在网上找到的代码，但没有一个能做到这一点，因为它们都带有一个 html 部分。
我的猜测是：图像已经存在，我不需要 html 部分，只需为图像分配类或 id，然后为每个图像赋予相同类型的 CSS 代码。
我在正确的轨道上吗？谁能帮我写代码？
提前非常感谢！
【问题讨论】：
标签： css wordpress image hover revolution-slider
添加一个类，然后做一些 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- 是歌剧，-moz- 是火狐等。
另外，请确保更改 .slider-img 宽度以满足您的需求。
查看 js fiddle 上的工作示例：
【讨论】：