When attempting to apply a fade in/out effect to an image or video with a solid background color and using the same transition for the opacity of an html element with a matching background color, a noticeable "square" appears around the image/video.
Why do they appear differently when using the same settings?
Below is an excerpt from 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>You can view the full code sample here: https://codepen.io/WeCU/pen/zYJJNQV