Glitches in CSS when hovering over different divs and parts of the browser

Link to my codepen: [Codepen](https://codepen.io/sunylkwc-the-selector/pen/xxBPRGx?editors=1100)

When you hover different parts of the webpage the weird glitches occur on the transparent cards, such as when you hover the third card glitches appear on the first card as a faded line and when you hover the read more button of the second card same thing happens.

I tried switching my browser but it was still there.

tested in Edge v120.0.2210.144

The issue stems from your backdrop-filter: blur(0px);, transform and box-shadow on the card elements.

The tilt-glare effect you are using is affecting the shadows and the backdrop filter.

There are a couple of fixes you can employ, though the main way is a bit of effort.

1. Remove either the backdrop filter or the box-shadow
2. Reduce the shadow size significantly to 5px 5px 5px
3. Split the shadow into its own pseudo-element so that the filters can't interact with it

The simplest and best-looking fix is to drop the shadows or the blur, from my experimenting with your codepen.

The effects can be used together in current browser versions but not quite with the way you have built the page.

Essentially what you are seeing is a flicker in the blurred area of the shadow emphasised by the effects on the other cards (I believe)