Make glow effect broader

Make glow effect broader

MiguelMaya
Tourist
46 0 4

We made a very cool glow effect when hovering over. I want it to be broader. Ill reference the code here.

 

Also, this obviously only works for desktop version, it’d be very cool to have an automatic glow animation running for itself that looks just the same whenever someone enters the mobile version. 

 

You’re all so helpful thanks!

 

Using Dawn 15 misteri.ca

 

IMG_0583.png

 

Code used:

 

.banner__heading {
  position: relative;
  display: inline-block;
  text-align: center; /* Center-align the content */
}
.banner__heading {
  display: block;
  max-width: 100%;
  height: auto;
  position: relative;
}
.banner__heading::after {
  content: '';
  position: absolute;
  bottom: 50%; /* Position the underline centered vertically */
  left: 50%; /* Position the underline centered horizontally */
  transform: translate(-50%, 50%); /* Adjust to center the underline */
  width: 80%; /* Adjust the width of the underline */
  height: 5px;
  background-color: transparent;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0); /* Initial box-shadow (transparent white), wider spread */
  transition: box-shadow 0.4s ease; /* Smooth transition for the glow effect */
}
.banner__heading:hover::after {
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 60px rgba(255, 255, 255, 1); /* White glowing effect on hover, even wider spread */ 

 

Replies 2 (2)

Shanonkoemas
Tourist
6 0 0

Hello there

 

BSS-TekLabs
Shopify Partner
614 174 205

Hi @MiguelMaya,

You can follow these steps to make the glowing effect that you want

1. Open Online Store > Theme > Edit Code

2. Find and open the base.css (or theme.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

.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

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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency