Skip to content
Submitted over 2 years ago

3-column-preview-card-component

Zinah•420
@Zinah-Zwayen
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, Please check my solution, my cards pop up when I hover on the buttons!! any advice? all feedbacks are welcome. Thanks

Community feedback

  • Nicki•170
    @Nickil13Posted over 2 years ago

    Hey Zinah!

    It looks to me like your cards are popping up on hover because of your button border going from the default (1px) to 3px on hover. Something you can do is adjust the button CSS so that it's transparent 3px before the hover so the size of the button remains the same between states.

    Another thing I would suggest is using styling the generic button tag or making a class name for all buttons so you don't have to rewrite the same CSS for each button.

    ex. <button class="btn button1">Learn More</button>

    In the above example, btn could have adjustments that all the buttons have in common (border radius, border color, font-weight) and button1 can have things specific only to button 1.

    2
    Zinah•420
    @Zinah-ZwayenPosted over 2 years ago

    @Nickil13 Wow, it works thanks a lot Nicki adding two names for one class something new to learn

    0
    Nicki•170
    @Nickil13Posted over 2 years ago

    @Zinah-Zwayen No problem! Happy to help

    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