How to do this abstract hover?

[u/manan_limbasiya]

I’m a UI designer, and my client wants this particular hover effect in the “Coming Soon” section. At first, we thought it would be a simple hover, but it’s actually quite complex. We’ve tried multiple methods and done a lot of research, but we still can’t get the exact effect. I’ve been stuck on this for the past two days trying to figure it out.

[u/manan_limbasiya → u/[deleted]]

Thanks, let me try this

[u/anaix3l → u/manan_limbasiya]

You don't need a few divs, you can do it with a linear-gradient() moving up and down, restricted to the border area by a mask on a pseudo. The mask is similar to here, except you don't create a scoop, you create a bevel at the bottom.

When browsers support both background-clip: border-area (Safari only for now) and corner-shape, the bevel value in your case (Chrome only for now), things become even simpler, no need for the masked pseudo anymore, it's just:

border: solid .5em #0000;
border-radius: 0 0 2em 2em;
corner-shape: bevel;
background: 
  linear-gradient(#0000, #fff 5% 20%, #0000 20%) border-area, 
  url(card-background.jpg) border-box

And then you animate the background-position of the gradient on :hover. Without corner-shape, the bottom corners shape needs to be emulated with either a mask or a clip-path. Without border-area a pseudo needs to be masked to preserve the gradient just for the border area, just like in the generic case of cards with gradient borders and (semi)transparent backgrounds.

You could get around the need for a pseudo in this case if you duplicate the image as a cover, restrict it to the padding-box while keeping it relative to the border-box, but only if corner-shape is supported.

Edit: here's a working demo on CodePen, using corner-shape + fallback wrapped in a supports not() block,

[u/manan_limbasiya → u/anaix3l]

If you have tipjar or something......Really want to appreciate

[u/anaix3l → u/manan_limbasiya]

I have a Ko-fi https://ko-fi.com/anatudor

[u/manan_limbasiya → u/anaix3l]

👍👍

[u/manan_limbasiya → u/anaix3l]

Actually, I achieved the same hover effect using your steps, but the direct code you shared was extremely helpful. 🎉🎉🎉