Gustavo Oliveira Gustavo Oliveira - 1 year ago 34
HTML Question

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

I was working on this website, which uses

. 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
because shadows wouldn't interfere within the image. The code looks like this:


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


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
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
and other webkit based browsers tested got the same buggy look. Is there another way to make that effect work in all browsers besides

Answer Source

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>
<div class="wrapper blue">
  <div class="image"></div>
<div class="wrapper green">
  <div class="image"></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