HTML CSS Assessment Box-shadow

Learning Challenge box-shadow transition

I have no idea what to do for the box-shadow transition.

I have tried writing my html in containers so I could apply the transition to “containers,” but that didn’t work and my picture card was messed up, so I changed my html. Now, my picture card looks like it’s supposed to look, but I don’t know how to implement the transition. I have read everything on the subject, and I am at a loss.

Screenshots

1 Like

Hi Melonnie,
It looks like you must be almost finished with the assessment if you’re on this part, so great job so far! It’s tough to help troubleshoot without seeing the relevant html, because I need to see how your containers are set up. Can you paste in the html code for just the picture card portion?

Also, do you have any css code for .card:hover, or hover in relation to another class?

I can definitely share some ideas/resources once I see the html for the picture card.
Jesse

Thank you for replying Jesse. After I submitted my question, I sat and thought about it and realized that I would need to use .card:hover so at least I’m on the right track. My question at this point, though, is do I put the block-shadow numbers in both the card and card:hover?? I’m not at home at the moment, but as soon as I get back, I’ll screenshot my HTML and send it over. I tried two different html’s and I might go back to my original one and change my css to match. Either way, I’ll send over screenshots as soon as I get back.

Best Wishes,
Melonnie Hicks
melonnie13@gmail.com

Hi Melonnie,

It sounds like you probably don’t need to send the HTML after all! As for the box-shadow, you only need the effect to show up when the mouse is hovering, you don’t need the shadow anytime else.

Try incorporating the css on hover, and play around with it in the browser - I think you’ll have it!
Jesse

Okay, I got the transition to work. Sort of. When I hit refresh on the page, the transition happens and it looks really good, but it doesn’t happen when I hover. I am about to take the live lecture at 1:30, so maybe I’ll figure out my error there. In the meantime, here is my updated html and css.

image.jpg

Hmm…you’re so close, Melonnie! Likely close enough to pass the test specs in this area.

What happens if you move the transition into the hover section?

I fixed it!! Or at least it works it seems. image

1 Like