Question

我正在附上下面的图片..是否知道如何通过css在这种类型的图像中给出悬停效果

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

                </a>

image

hover like this

Answer 1

如果您有两张图片，为什么不在悬停时更换。如果这就是你的意思，那就是Dunno。

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

当你悬停时，这会将想象替换为你想要的那个。

Answer 2

你想要的是创建一个类来控制你想要添加的DirectoryServicesCOMException效果。这样做是在hover：

中完成的

CSS

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

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

如果您想为图片添加大纲，那么您可以使用.classname:hover{ background-image: url('path to your image'); }，这是一个快速修复，但我不推荐，如下所示：

drop-shadow

Answer 3

假设你有这个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>

Answer 4

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

Answer 5

以下是您可以执行的操作示例（只需更改指向图像区域的链接即可。

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)
}

悬停在图像中的效果

5 个答案: