Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card challenge

IZY_BOY 70

@IZY-BOY

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What challenges did you encounter, and how did you overcome them?

it wasn't easy to do the animation, i had to cheat with a litle js

What specific areas of your project would you like help with?

is there any way of producing the shadow animation on hover only with html and css??? If yes please i would like to know how.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi!

You choose the wrong pseudo-class. It should be hover instead of action and than transition would work =)

But I suggest you to specify which properties you want to be animated. I mean transition: box-shadow .5s; instead just transition: .5s;. In the second case all changing effects will be animated and sometimes it looks weird =)

Marked as helpful

0

IZY_BOY 70

@IZY-BOY

Posted

@Alex-Archer-I thanks for the suggestion i will have a try of right a way

1
Alex 3,130

@Alex-Archer-I

Posted

@IZY-BOY

You're welcome =)

I forgot to specify that active works when user click on the element and hover - when they hover mouse over it.

1
IZY_BOY 70

@IZY-BOY

Posted

@Alex-Archer-I Yes i know, just that i was following the design images (it is written active-state)

1
Alex 3,130

@Alex-Archer-I

Posted

@IZY-BOY

Hah, I didn't think about it that way, good catch =)

I really hope that they don't mean that though cos when user clicks on the link they are immediately redirected and never sees active effect =)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord