Gustavo Oliveira Gustavo Oliveira - 7 months ago 9
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

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

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

Comments