图像中的悬停效果答案

【问题标题】：Hover effect in the image图像中的悬停效果
【发布时间】：2017-09-14 08:06:06
【问题描述】：

我附上下面的图片..有人知道如何在这种类型的图片中通过 css 提供悬停效果

<a href="#top"><img class="popup1 img-1" src="assets/images/img-1.png" />

                </a>

image

hover like this

【问题讨论】：

“悬停效果”是什么意思？
我看到的唯一悬停效果是黄色边框？
您无法使用 CSS 设置“实际图像”的样式。使其在悬停时显示带有轮廓边框的图像。您只能在图像周围添加边框，这在 HTML 中总是一个正方形。 CSS 不是 Photoshop ;)
是的，我希望鼠标悬停时图像上有黄色边框@waxi
这就是我要求用 css @Richard Mauritz 为实际图像设置样式的热门原因

标签： html css

【解决方案1】：

您想要的是创建一个类来控制您要添加的hover 效果。这是在CSS 中完成的：

.classname:hover{
    /*css stuff here*/
}

推荐的方法是在用户将鼠标悬停在您的图像上后使用不同的图像，如下所示：

.classname:hover{
    background-image: url('path to your image');
}

如果您想为图像添加轮廓，则可以使用drop-shadow，这是一种快速修复，但我不建议这样做：

.classname:hover{
    -webkit-filter: drop-shadow(1px 1px 0 yellow)
                    drop-shadow(-1px -1px 0 yellow);
    filter: drop-shadow(1px 1px 0 yellow) 
            drop-shadow(-1px -1px 0 yellow);
}

【讨论】：

【解决方案2】：

这是您可以做的一个示例（只需更改指向图像区域的链接，它应该可以工作。

JSFiddle

HTML

<a href="#top"><img class="popup1 img-1" src="https://i.stack.imgur.com/G9Sd7.png" />

                </a>

CSS

.popup1:hover {
  background-image: url(https://i.stack.imgur.com/D4EzQ.png)
}

【讨论】：

【解决方案3】：

这篇文章有关于如何为自定义形状图像制作阴影的答案，基于此，您应该能够弄清楚如何制作黄色阴影。 Drop shadow for PNG image in CSS

【讨论】：

【解决方案4】：

假设你有这个 html 文件：

        <!DOCTYPE html>
       <html>
    <head>
    <style>
    .container {
        position: relative;
        width: 50%;
    }

    .image {
      opacity: 1;
      display: block;
      width: 100%;
      height: auto;
      transition: .5s ease;
      backface-visibility: hidden;
    }

    .middle {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%)
    }

    .container:hover .image {
      opacity: 0.3;
    }

    .container:hover .middle {
      opacity: 1;
    }

    .text {
      background-color: #4CAF50;
      color: white;
      font-size: 16px;
      padding: 16px 32px;
    }
    </style>
    </head>
    <body>

    <div class="container">
      <img src="http://combiboilersleeds.com/images/image/image-0.jpg" alt="" class="image" style="width:100%">
      <div class="middle">
        <div class="text">WOW Hover Effect</div>
      </div>
    </div>

    </body>
    </html>

【讨论】：

他要求使用 css 进行图像悬停
查看他的示例图片。

【解决方案5】：

如果您有这两个图像，为什么不在悬停时替换。不知道你一开始是不是这个意思。

.my-class:hover {
   background-image: url('assets/images/img-2.png');
}

当您将鼠标悬停时，它将用您想要的替换想象。

【讨论】：

实际上我有 100 张图片，不可能为每张图片创建 2 张图片，这就是我想要 css 的原因
最好将边框图像放在图片顶部，并将空白图像更改为：悬停上的边框，这样可以节省数据使用量
@user3784723 如果它们都具有相同的形状，那么我上面的回答有效