Image Hover State Reversal

[SFmarketing]

The standard Cardinal image hover state is a color overlay and caption. I would like to do the opposite, the color overlay and caption are the resting state and then the hover reveals the image. Is there a simple way to do this?

I have it working right now, I just can’t get the caption to go away on the hover

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide a link to a page where you have this so we can check what we can do?
Didn’t see it in the link provided.

-Rui

[SFmarketing]

This reply has been marked as private.

[Kyle – SUPPORT]

Add this:

figure.animated-overlay:hover figcaption .thumb-info {
  display: none;
}

– Kyle

[SFmarketing]

Worked like a charm! Thank you!

[Kyle – SUPPORT]

No problem

[SFmarketing]

One more thing, is there a way to make the fade transition on the text ease out a little more smoothly? like I have the background doing?

Thanks!

[Kyle – SUPPORT]

Remove the previous css I gave you and use this instead:

figure.animated-overlay:hover figcaption .thumb-info {
  opacity: 0;
  transition: all 0.4s ease 0s;
}

– Kyle