Docs

[yhshin1020]

Hey,

I am trying to emulate an effect where, when the user hovers his mouse pointer over an area, a big white box fades in.

The effect can be seen on this website: https://get.slack.help/hc/en-us

I have temporarily set up something like that but now im trying to figure out why i cant achieve the same effect (a smooth transition instead of a sudden one) as well as why the hover animation for the left column is not the same as the right column.

Also, the background doesnt transition to a white colour when it hovers, for some reason.

Could you review my css and perhaps help me with achieving this look?

Thanks.

[yhshin1020]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this code :

.intro_card_container {
    transition: all 0.3s ease-in-out;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
}

Hope it helps.

[yhshin1020]

This reply has been marked as private.

[Lely]

Hello There,

The expansion seems the same when I check. Can you clarify?

The container inside that element has background too. That what you’re seeing. We can set that to transparent so we can see the white background behind. Please use this custom CSS:

.intro_cards .card {
    background-color: transparent !important;
}

Hope this helps.

[yhshin1020]

This reply has been marked as private.

[Lely]

You’re welcome!

Cheers!

[Author]

Posts