Shopify themes, liquid, logos, and UX
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
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 */
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
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
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025