Hover State - Changing Creative

Hi everyone,

I’m trying to apply a hover state to one of my project cards within a grid where the user would hover over and a whole new card comes up with say a black background and some more overview text in that space.

  • Would I create a new image and drop in for the hover state?
  • Or would I create another div on top of it that card remove its opacity then bring the opacity back in on it upon hover?

Thank you in advance for your help, here’s my read only link -
https://preview.webflow.com/preview/wallys-five-star-project-2f3765f7fa328c?utm_medium=preview_link&utm_source=dashboard&utm_content=wallys-five-star-project-2f3765f7fa328c&preview=2728f3d71743f3b71130b7300d4f56ab&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Definitely use IX instead of styling for the hover state, if you have a complete content to show on hover.

Closer to this. Opacity:0 is a no brainer in order to be able to fade the new content in, even if it’s a very fast fading. But you may also want to Display:none too, depending on where the trigger is and if you have other interactions in the default state of the card.

Think ahead where you place your trigger: on the default card, or the parent of both cards. I suggest the parent. Nest one more level if needed (.card-container).

You can also go for a 3D flip, with the hover card being rotated, on the back of the default one. then you rotate the container (then you need a second container for the trigger, don’t put hover triggers on things that move, rotate, expand…)

Awesome, thanks Vincent! I’m pretty sure I’m tracking with ya, going to give it a go and report back. Thanks again.

1 Like