Make glow effect broader

Make glow effect broader

MiguelMaya
Excursionist
48 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 */ 

 

Reply 1 (1)

BSS-TekLabs
Shopify Partner
2401 695 830

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.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now