## Bug: `ease-hover-glow` box-shadow completely hidden inside `overflow: hidden` containers

[Pcmhacker-piro]

Bug: ease-hover-glow box-shadow completely hidden inside overflow: hidden containers

Description

The ease-hover-glow class applies an expanded box-shadow on hover, but when the element is inside any parent with overflow: hidden, the glow effect is clipped at the parent's boundaries. This makes the glow invisible or partially cut off in common layouts like cards with rounded clip regions.

Steps to Reproduce

1. Link EaseMotion CSS v1.0.0
2. Create a card with overflow hidden containing a glow button:

   <div class="ease-card" style="overflow: hidden;">
     <button class="ease-btn ease-btn-primary ease-hover-glow">
       Glow Button
     </button>
   </div>

3. Hover over the button and observe the glow effect near the card edges

Expected Behavior

The glow box-shadow should be visible extending outward from the button boundaries, even when the button is positioned near the edge of an overflow-hidden container.

Actual Behavior

When the button is within 20–30px of the parent container's edge (which is common in card layouts with padding), the box-shadow: 0 0 20px var(--ease-primary) is truncated at the parent's overflow: hidden boundary. On buttons near the left or right edge of a card, the glow appears as a flat cut-off line instead of a smooth radial spread. In extreme cases (button flush with the container edge), the glow effect is entirely invisible.

Implementation Hints

The issue is in core/animations.css for the glow hover effect:

/* Current implementation */
.ease-hover-glow {
  transition: box-shadow 0.3s ease;
}

.ease-hover-glow:hover {
  box-shadow: 0 0 20px var(--ease-primary, #6366f1),
              0 0 40px var(--ease-primary, #6366f1);
}

The fix should use filter: drop-shadow() instead of box-shadow when the parent has overflow hidden, or use an ::after pseudo-element that renders outside the clipping context:

/* Option A — Use filter instead of box-shadow (not clipped by overflow) */
.ease-hover-glow:hover {
  filter: drop-shadow(0 0 10px var(--ease-primary, #6366f1))
          drop-shadow(0 0 20px var(--ease-primary, #6366f1));
  /* Remove box-shadow when using filter */
  box-shadow: none;
}

/* Option B — Use ::after pseudo-element positioned outside the box model */
.ease-hover-glow {
  position: relative;
  z-index: 1;
}

.ease-hover-glow::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ease-hover-glow:hover::after {
  opacity: 1;
  box-shadow: 0 0 20px var(--ease-primary, #6366f1);
}

Option A is the simpler fix — filter: drop-shadow() is rendered in the element's own painting context and is not clipped by parent overflow: hidden. However, filter has slightly worse performance than box-shadow. Option B is a visual workaround that renders the glow outside the box boundary using absolute positioning.

Affected Files

• core/animations.css — .ease-hover-glow box-shadow implementation
• easemotion/hover.css — if hover animations are duplicated there

Labels

type:bug, level:intermediate, GSSoC-26

[github-actions]

Hey @Pcmhacker-piro! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside submissions/examples/your-feature-name/
• Include demo.html · style.css · README.md in your folder
• Max 2 active issues per contributor — unassign others before taking new ones

🕑 Inactivity rule: Issues with no progress for 5 days will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡

[surajbharsakle07]

Hi @Pcmhacker-piro,

I reviewed the issue and the proposed filter: drop-shadow() approach in PR #1404. The fix looks aligned with the reported overflow-clipping problem and should improve the visibility of the glow effect inside overflow: hidden containers.

I'd be happy to help with testing across different layouts and browsers or assist with any follow-up changes if needed. Thanks for working on this!