How to make an image fade out without affecting the opacity of a simultaneous bright glow effect

Question

EDIT:

Thanks to tavkomann's help, I got the effects working now as they should. I have also resolved the issue I crossed out below by setting the padding of each image's container to 0px. Hope this helps fellow coders!

There is just one issue that remains: even though the images do conform to their respective containers in proper alignment, they still do not span the entire width of each; as a result, there is just a strip of space left over on each side.

Updated code:

#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;
}

ORIGINAL:

I'm trying to make an image fade out and glow at the same time whenever you hover over it against a black background.

The problem is that when it fades out, its opacity decreases, and this affects all attributes, including box-shadow.

As a result, the opacity of the glow effect decreases and extinguishes the glow. So far, the image fades in and out when you hover over and away from it, respectively. I have included the CSS code below.

#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;
}

I have two possible (concurrent) solutions in mind, but have yet to find a way to implement either:

1. create an "underlay," a div under the image that casts its own unadulterated glow
2. use something other than the hover pseudo-class and the opacity attribute to simulate and isolate the fade effect (e.g. use jQuery).

Answer 1

I will show an implementation for this solution:

create an "underlay," a div under the image that casts its own unadulterated glow

First of all, we need to create a structure for the "underlay". This is simply a parent container:

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

Now, just add the border and the border-radius to the parent container instead of the image. In order for the container to adapt to the size of the image, we have to use display: inline-block. We also need to set overflow: hidden so that the image fits to the border-radius of the container. Last but not least, we should use vertical-align: middle for the image, so there is not a space at the bottom.

Finally, this leads us to the following code example in which both, the fade out and the glow effect, work correctly:

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>