Make glow effect stronger

Store Design
, , ,
7

Hi @MiguelMaya ,

You can make the glow effect stronger to your preference by repeating the box shadow in the hover state, just like with the text shadow. Here is the code

.banner__heading {
  display: block;
  max-width: 100%;
  height: auto;
  position: relative;
}
.banner__heading::after {
  content: '';
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  /* You can change this value to make the shadow longer */
  width: 96%;
  /* You can change this value to make the show wider and stronger */
  height: 10px;
  background-color: transparent;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0);
  transition: 0.4s ease;
  
}
.banner__heading:hover::after {
  background-color: rgba(255, 255, 255, 0.42);
  /* You can change the 3rd parameter to make the blur wider */
  box-shadow: 0 10px 60px rgba(255, 255, 255, 1), 0 10px 60px rgba(255, 255, 255, 1), 0 10px 60px rgba(255, 255, 255, 1), 0 10px 60px rgba(255, 255, 255, 1);
}

Here is the result

BSSTekLabs_1-1720192767490.png
BSSTekLabs_1-1720192767490.png2879×1216 508 KB

Hope this helps you solve the issue.

Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!