旋转滑块的图像悬停 CSS

Question

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

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

在旋转滑块中，您可以将类、ID 和 CSS 添加到特定图像，所以我可能需要的是一个 CSS 代码，使之成为可能。我已经尝试了几个在网上找到的代码，但其中 none 可以解决问题，因为它们都带有 html 部分。

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

我的方向正确吗？谁能帮我写代码？

非常感谢！

Answer 1

添加一个class，然后做一些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: scale(0.7); 缩小了 70%；

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

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

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

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

查看 js 上的工作示例 fiddle:

here

旋转滑块的图像悬停 CSS

Image hover CSS for revolution slider

css

wordpress

image

hover

revolution-slider