App Academy

Transition HTML Help

HTML/CSS Learning Challenge

Transition Question
Hey everyone!:blush:
So I’m attempting to add transition CSS to .card selector and for some reason the transition is rendered immediately instead of being activated when pointer hovers over card. F.Y.I. I added the pink border to troubleshoot (I was never able to see it however). Does anyone have any idea on what I could be doing wrong.

What I’ve tried

Hi Frema, and welcome to the community!

I think you are really close to solving this!

It looks like you have included the box-shadow code on .card, not .card:hover. So right now, your code is set to have the box-shadow all the time except when you hover over the card. I would switch out the box-shadow from .card and see what happens when you put those values in box-shadow for .card:hover.

In terms of the pink border for troubleshooting - that is an excellent strategy. Whenever you use a border, you need to define the border-style as well, otherwise it will default to “none” and the border will be invisible. This may be what is happening for you. Try adding border-style: solid; or adding the style as a one-liner (similar to how you defined your border at the top of the screenshot).

Try out these ideas, and let us know if you see any change. We can always troubleshoot further if it is still not behaving as planned!
Jesse

Hey Jesse! thank you so much for all your help! I was able to get them both to work. I appreciate you :blush:

1 Like