Recently, I was working on a project involving this website that utilizes the Bootstrap framework. One interesting feature of the website is circle-shaped images that create a color light effect when hovered over. To achieve this, I decided to use the CSS property box-shadow as it wouldn't affect the image itself. Here's a snippet of the code:
HTML:
<div class="col-sm-3" id="af">
<br/><br/><br/>
<center>
<img src="OnePicture.jpg" class="img-circle smallpic"/>
</center>
<!-- Additional content within the div -->
</div>
CSS:
.smallpic{
max-width:100px;
max-height: 100px;
border: 3px solid transparent;
/* Attempting to trigger 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;
}
Despite successfully achieving the desired visual effect, it came to my attention that there is an issue with Webkit browsers like Google Chrome, where the effect doesn't render properly.
Here's how it appears in Google Chrome: link
While the code functions flawlessly on browsers such as Mozilla Firefox, Microsoft Edge, and Internet Explorer, the same cannot be said for Webkit-based ones including Google Chrome and Vivaldi. Are there alternative methods to achieve this effect across all browsers without relying on box-shadow?