3-column preview card component with responsive hover
Design comparison
Solution retrospective
Hello, Everyone, This is my solution for the 3-column preview card component.
Im quite proud of the hover states and how the column padding adjusts as you hover on the non hover columns to make it more intresting.
Feel free to leave any feedback and help me improve my solution, i try for the life of me to add more descriptive comments but on this go around i couldnt find the time to add them for that I apologize in advance! thank you!
Community feedback
- @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 helpful0 - @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@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 JSHere's a link I found that allowed to me grasp this concept. Styling Siblings link
1
Please log in to post a comment
Log in with GitHubJoin 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