CSS Adding shadow transition

Hi guys, I’m stuck on trying to add the transition to the card and while I can add the shadow normally like below, I can’t get it to transition on a hover. Any help would be appreciated.

.card {

/* Add shadows to create the “card” effect */

box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);

transition: 0.3s;

Hey @zafirahb! You need to add an additional CSS entity that is specifically for when the mouse is hovering over the card via ".card:hover{ [your code here] }.
I found this demonstration really helpful in making mine: https://codepen.io/ovdojoey/pen/BomKyZ

Hope that helps!
–Brandon

1 Like