Skip to content
Submitted 7 months ago

Blog preview card with hover animation

Robert•40
@RobertLikesCoding
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I like the way I managed to create the hover effect with the translateY and translateX.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX

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

No challenges except for the hover animation.

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

I'd be interested in other ways to animate the hover effect!

Community feedback

  • IrieBee•280
    @IrieBeePosted 7 months ago

    Hi @RobertLikesCoding,

    That's an awesome solution for hover effect. You did it on the whole card instead of only header. That's why I couldn't get longer shadows on card... Love it!

    Have a nice day and happy coding

    Marked as helpful
    0
    Robert•40
    @RobertLikesCodingPosted 7 months ago

    @ltsyBitsy Yeah as far as I saw from the prototype photos, the h1 was turning yellow and the card looked like it was coming up. It's easy to miss though 😅

    1
    IrieBee•280
    @IrieBeePosted 7 months ago

    @RobertLikesCoding Yeah, I saw it too. But just couldn't figure out how to make it work. Your solution helped me to understand it. Super excited about it!

    Marked as helpful
    0
  • Paul McAviney•40
    @paul-mcavineyPosted 7 months ago

    Great job with the challenge! My only criticism is that it's a bit bigger than the original design, which isn't a big deal. Also you didn't replace the original README file so the one displayed in your github profile is the one for starting the project.

    0
    Robert•40
    @RobertLikesCodingPosted 7 months ago

    @paul-mcaviney Thanks Paul! Ah yes, it’s actually there 😅 I just forgot to delete and rename. I’ll update it later 👍

    0

Please log in to post a comment

Log in with GitHub

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