Issue with CSS transition when fading a img/video with a solid background together with a html element that has same background color

Question

When I try to fade in/out an image or video with a solid background color and use the same transition for opacity of a html element with the same background color I will get this noticable "square" around the image/video.

Why does they differ when using same settings?

Below is a snippet of my code:

.bluebg {
  position: relative;
  padding: 30px;
  background: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100px;
}

.bluebg:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: #325795;
  opacity: 0;
  visibility: hidden;
}

.bluebg video {
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.bluebg video,
.bluebg:after {
  transition: all 2s;
}

.bluebg:hover video,
.bluebg:hover:after {
  opacity: 1;
  visibility: visible;
}

<div class="bluebg">Hover me
  <video playsinline autoplay muted loop width="300" src="https://lionmusicals.dk/xaskepot/wp-content/uploads/glitterlogo-blue.webm"></video>
</div>

I've created this pin https://codepen.io/WeCU/pen/zYJJNQV

Answer 1

This presumably happens because the video container overlaps the :after, so it's basically a double transition. What you could do is apply the transition to just the wrapping div, as the video is already within it.

Additionally, the background color of the div doesn't match the video's background entirely. #3a5791 is closer (but not exactly right either).