colored Shadow ambilight

by jpeter06

HTML

<div class="parent flexcenter">
  <div class="imageContainer flexcenter">
    <img class="image1 foregroundImg" >
    <img class=" image1 backgroundImg" >
  </div>
</div>

CSS

html, body{
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
  display:flex;
  flex-direction: row; 
  justify-content: center;
  align-items: center;
  overflow:hidden;
  background:#aba;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFklEQVQI12OcXpVnJH+O6YM4zyteWwAlGgTp15EYpAAAAABJRU5ErkJggg==');
  background-repeat: no-repeat;
  background-size:cover;
}

.flexcenter{
  display:flex;
  flex-direction: row; 
  justify-content: center;
  align-items: center;
}

.parent{
  position:relative;
  width:80%;
  height:80%;
  background:white;
}

.imageContainer{
  position: relative;
  width:80%;
  height:80%;
  background:#aba;
}

.image1 {
  content:url(https://i.imgur.com/Ic4rBtd.jpeg);
  content:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAABOUlEQVQY0wXBTUvCYAAA4PfT+TFdWsZAKEjCgiw6FXXo0q0fEJ26+1v6FUXXSAI7hZl2MbBSScpCER2VbTaZezf39q7ngaNhhXODPdZxWyXJhHDc3vJ+dyAwhrYtCIJBZEUwUIT8K+wQQKj2MHl+9eMzyLIENLQilZK2Uee6LnRHo4cmiEynonxnG/of7LRurTETnBN55bTddQCgPsmMMoTAYBChvrGBnDzyB4zP76Vqm3Mvg07owmsgqGWzJfij1V3jxpYXPQjCvOJ4wypLNYe7LL+2lKaw3zzRJcUMRBPOhyqvvyPdty4jJA15DcRyiLufMQkvcF9x8T32zpzGBKvUPecAFvkXgigAv58kzgqk9TapHod3VEhdskWVXIGViC+7YIxIYBaD1SNl27TK8ehBjySuzGsKyD9G0pu8BkNdxQAAAABJRU5ErkJggg==');
  max-width:100%;
  width:100%;
  height: auto;
  image-rendering: pixelated;
}
.foregroundImg{
    cursor: pointer;
    position: relative;
    z-index: 2;
    pointer-events: none;
    
}
.backgroundImg{
			position: absolute;
			top: 2px;
			left: 0;
	
			transition: all 0.25s ease;
			opacity: 0;
			z-index: 1;
}

	.imageContainer:hover	.backgroundImg{
	  			opacity: 1;
			filter: brightness(80%) blur(22px);
	}