如何实现图片淡出效果且不影响同步高亮发光效果的透明度

编辑说明
更新：已经搞定啦！多亏了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;
}

原始问题 #

我希望在黑色背景下，鼠标悬停图片时，同时实现图片淡出和发光效果。

问题在于图片淡出时opacity属性降低，会影响所有属性，包括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;
}

我想到了两种可行的解决方案，但尚未找到实现方法：

• 创建一个“底层容器”，即图片下方的div，使其独立产生不受影响的发光效果
• 不使用hover伪类和opacity属性，改用其他方式模拟并隔离淡出效果（例如使用jQuery）

内容的提问来源于stack exchange，提问作者gooflord