3-column preview card component with responsive hover

Community feedback

• 

  Adriano•38,390

  @AdrianoEscarabotePosted over 2 years ago

  Hello! you didi a great job in this challenge.

  I really liked the effect you put when the mouse hovers over the container to grow a little.

  your report has some problem:

  1- Images must have alternate text, for visually impaired people to understand the image, and also when a bug occurs and the image does not load the text appears.

  Hope it helps:)...don't forget to mark it as helpful 👍

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Miguel! Congratulations for your solution, really creative one!

  How you did to make the hover on one dive affect the other elements? This is done only with HTML / CSS? Did you use the ~ general sibling selector or something similar? I'm curious about it.

  By the way I liked a lots this effect. I like also to change a little bit my solutions and yours is the one more creative for the 3 cards challenge.

  Congrats bro. Keep it up!

  1

  ---

  

  Miguel Chavez•210

  @toonchavez8Posted over 2 years ago

  @correlucas

  I used .parent:hover .child:not(:hover) to alter the non-hovered items to make it look like the hovered item is moving everything and I added a gentle padding change to the hover item to sell this and make it still maintain the rectangle shape of the design without recurring to JS

  Here's a link I found that allowed to me grasp this concept. Styling Siblings link

  1