如何使图像淡出而不影响同时亮光效果的不透明度

Question

编辑：

多亏了 tavkomann 的帮助，我的效果现在可以正常工作了。我还通过将每个图像容器的padding 设置为0px. 解决了我在下面划掉的问题，希望这对其他编码人员有所帮助！

只剩下一个问题：即使图像确实符合它们各自的容器并正确对齐，它们仍然没有跨越每个容器的整个宽度；结果，每边只剩下一条空间。

更新代码：

#main-imgs {
    margin-top: 70px;
}

/* container for each image */

#main-imgs .img-column {
    display: inline-block;      /* conform container to image size */
    overflow: hidden;           /* avoid image-border overlap */

    max-height: 215px;
    padding: 0px;               /* fit image within border */

    border-width: 8px;
    border-radius: 15%;

    border-style: double;
    border-color: #290B01;

box-shadow: 0px 0px 0px 0px black;
    transition: all .6s ease-in-out;
}

/* container hover event */

#main-imgs .img-column:hover {
    box-shadow: 0px 0px 30px 0px white;
    transition: all .6s ease-in-out;
}    

/* image */

#main-imgs img {
    vertical-align: middle;    /* rid of space beneath image */
    opacity: 1.0;
    transition: all .6s ease-in-out;
}

/* image hover event */

#main-imgs img:hover {
    opacity: 0.2;
    transition: all .6s ease-in-out;
}

原文：

我正在尝试让图像淡出并在您将鼠标悬停在黑色背景上时同时发光。

问题是当它淡出时，它的不透明度会降低，这会影响所有属性，包括box-shadow.

因此，发光效果的不透明度会降低并熄灭发光。到目前为止，当您将鼠标悬停在图像上方和远离图像时，图像会分别淡入和淡出。我在下面包含了 CSS 代码。

#main-imgs img {
  max-height: 220px;

  border-width: 8px;
  border-radius: 15%;

  border-style: double;
  border-color: #290B01;

  opacity: 1.0;
  transition: all .6s ease-in-out;
}

#main-imgs img:hover {
  opacity: 0.2;
  transition: all .6s ease-in-out;
}

我有两种可能的（并发）解决方案，但还没有找到一种方法来实现：

1. 在图像下方创建一个“底图”div，使其散发出纯粹的光芒
2. 使用除hover 伪类和opacity 属性之外的东西来模拟和隔离淡入淡出效果（例如，使用jQuery）。

Answer 1

我将展示这个解决方案的实现：

创建一个“底层”，即图像下方的一个 div，它会投射出自己的纯正光芒

首先，我们需要为“底层”创建一个结构。这只是一个父容器：

<div class="img">
  <img src="URL" alt="description" />
</div>

现在，只需将border 和border-radius 添加到父容器而不是图像。为了让容器适应图像的大小，我们必须使用display: inline-block。我们还需要设置overflow: hidden，以便图像适合容器的border-radius。最后但同样重要的是，我们应该使用vertical-align: middle 作为图像，so there is not a space at the bottom。

最后，这导致我们看到以下代码示例，其中淡出和发光效果都可以正常工作：

body {
  background-color: #000;
}

.img {
  display: inline-block;
  border: 8px double #290B01;
  border-radius: 15%;
  overflow: hidden;
}

.img > img {
  max-height: 220px;
  opacity: 1.0;
  transition: all .6s ease-in-out;
  vertical-align: middle;
}

.img > img:hover {
  opacity: 0.2;
  transition: all .6s ease-in-out;
}

<div class="img">
  <img src="http://via.placeholder.com/100x100" alt="description" />
</div>