Make logo stand out when hovering mouse over like with cart and log in buttons

Store Design
, , , , ,
1

When I hover the mouse over the cart and log in buttons, the buttons make a stand out or lift effect. I want the same for the logo if you’re able to help me please.

Using Dawn 15 misteri.ca

IMG_0570.png
IMG_0570.png2360×1640 594 KB

2

Hi @MiguelMaya ,

You can follow these steps to make the logo stand out on hover

  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

.header__heading-logo-wrapper {
  transition: transform 0.25s ease;
}

.header__heading-logo-wrapper:hover {
  transform: scale(1.05);
}

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!

1 Like
3

That’s perfect thank you! I realized id prefer a glowing effect, given our products glow in the dark. Is that possible. Thanks for your already kind helpfulness!

4

Hi @MiguelMaya ,

You can add the code snippet below to make a simple glowing effect. If you want, you can combine this with the code above to achieve 2 effects at the same time

.header__heading-logo-wrapper {
  box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  transition: box-shadow 0.6s ease;
}

.header__heading-logo-wrapper:hover {
  box-shadow: 0 0 8px 4px rgba(255, 255, 255, 0.46);
}

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

1 Like
5

Sadly that makes the box glow, not the typography. Thought it would make the typography glow given its in transparent png file. Is there a way to make that happen? If not thanks still for your help.

IMG_0574.png
IMG_0574.png2360×1640 599 KB

6

Hi @MiguelMaya ,

You can use this code snippet to make a glowing effect under the text

.header__heading-logo-wrapper {
  position: relative;
  display: inline-block;
  text-align: center; /* Center-align the content */
}

.header__heading-logo {
  display: block;
  max-width: 100%;
  height: auto;
  position: relative;
}

.header__heading-logo-wrapper::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.2s ease; /* Smooth transition for the glow effect */
}

.header__heading-logo-wrapper:hover::after {
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 60px rgba(255, 255, 255, 1.0); /* White glowing effect on hover, even wider spread */
}

Hope this helps you solve the issue.

1 Like
7

Thank u so much. It’s working wonderfully. I tried this exact code for the banner__heading, however it didn’t work, it highlights the title “Ilumina al mundo con tu Creatividad” surrounding box like the screenshot earlier for the logo.

8

I’d like to make it glow under the text like the logo, the same way, for the page title. Tried using your same code only changing it to banner_heading, but it highlights the surrounding box.

9

Hey I worked on it got it to work correctly, thanks! Just want to know how to make the glow effect stronger, I’ve not figured it out on the code. Thanks!