Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Katia De Juan Bayona
Katia De Juan Bayona
6,757 Points

Practicing Flexbox - I`d love some feedback! :)

After these days following the course about Flexbox, I decided to put in practice what I learnt with this exercise creating a responsive layouts showing some cards.

Here`s the link: http://codepen.io/Katiae/pen/zwjmbW

I would really appreciate some feedback to know what I'm doing right and wrong so that can get better at it. :)

1 Answer

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Looks great! Only thing that springs to mind immediately is to move your transitions to the .card-item rule, rather than the &:hover for it, so it applies both hovering in and out. :)

e.g.

.card-item {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);
    overflow: hidden;
    transition: transform 0.5s;
    -webkit-transition: transform 0.5s;

    &:hover {
      cursor: pointer;
      transform: scale(1.1);
      -webkit-transform: scale(1.1);

      .card-image {
        opacity: 1;
      }
    }
  }
Katia De Juan Bayona
Katia De Juan Bayona
6,757 Points

Oh! I didn't know that's how to add the transition when hovering out. Thanks so much! ^_^