How to create a circle-shaped image that emits a color light effect that runs in all browsers?

Question

I was working on this website, which uses bootstrap. On it there are circle-shaped images and when the mouse hovers I want to create an effect of that picture as creating a color light. For that, I used box-shadow because shadows wouldn't interfere within the image. The code looks like this:

HTML:

<div class="col-sm-3" id="af">
  <br/><br/><br/>
  <center>
  <img src="OnePicture.jpg" class="img-circle smallpic"/>
  </center>
  <!-- The div continues with text -->
</div>

CSS:

.smallpic{
  max-width:100px;
  max-height: 100px;
  border: 3px solid transparent;

  /*Trying to force GPU Acceleration*/

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);        

  -webkit-transition: all 1s;
  -webkit-transition-timing-function: ease;
  transition: all 1s;
  transition-timing-function: ease;
}
#af:hover .smallpic{
    border: 3px solid #E3000E;
    -webkit-transform: translate3d(0,0,0);
    -moz-box-shadow:  0 0  500px 100px #E3000E;
    -webkit-box-shadow: 0 0  500px 100px #E3000E;
    box-shadow: 0 0  500px 100px #E3000E;
}

This code did exactly what I want, but due to a Webkit bug, it won't work properly on any Webkit based browser, which includes the popular Google Chrome.

Here is the result in Google Chrome: link

In my tests, the code worked really well in Mozilla Firefox, Microsoft Edge and also Internet Explorer. But Google Chrome, Vivaldi and other webkit based browsers tested got the same buggy look. Is there another way to make that effect work in all browsers besides box-shadow usage?

Answer 1

But it is still possible to have the same behaviour in all browsers. You need just to modify your HTML and CSS.

Here the example HTML

<div class="wrapper red">
  <div class="image"></div>
  <h2>Red</h2>
</div>
<div class="wrapper blue">
  <div class="image"></div>
  <h2>Blue</h2>
</div>
<div class="wrapper green">
  <div class="image"></div>
  <h2>Green</h2>
</div>

Here the example CSS:

.wrapper {
  display: inline-block;
  position: relative;
  width: 300px;
  height: 300px;
}

.wrapper:before {
  position: absolute;
  content: ' ';
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: all 2s;
}

.blue:before {
  background: radial-gradient(ellipse at center, rgba(0, 0, 255, .7) 10%, rgba(0, 0, 255, 0) 70%);
  opacity: 0;
}

.red:before {
  background: radial-gradient(ellipse at center, rgba(255, 0, 0, .7) 10%, rgba(255, 0, 0, 0) 70%);
  opacity: 0;
}

.green:before {
  background: radial-gradient(ellipse at center, rgba(0, 255, 0, .7) 10%, rgba(0, 255, 0, 0) 70%);
  opacity: 0;
}

.wrapper:hover:before {
  opacity: 1;
}

.image {
  margin: 100px auto 0;
  border: 4px solid red;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.green .image {
  border-color: rgb(0, 255, 0);
  background-color: rgba(0, 255, 0, .3);
}

.red .image {
  border-color: rgb(255, 0, 0);
  background-color: rgba(255, 0, 0, .3);
}

.blue .image {
  border-color: rgb(0, 0, 255);
  background-color: rgba(0, 0, 255, .3);
}

h2 {
  text-align: center;
}

Here a live demo