The other day, while navigating online looking for inspiration, I found a photo gallery design by kevin on Dribbble, so I decided to create a minim...
For further actions, you may consider blocking this person and/or reporting abuse
This is awesome! 🤩
Particularly loved the clever use of
:has(), it was really perfect in this situation and I cannot think of another CSS-only solution to obtain the same result without using it. Amazing!Unfortunately, Firefox does not provide full-support to the :has pseudo-class. See
issue on Firefox
What's great about this gallery solution, though, is that even without
hasit still works. I may not get the fancy greyscaling effect in Firefox, but it's nevertheless laid out nicely and still makes it obvious what image I'm highlighting.A great example of progressive enhancement in action ( :
Good point! 💪
It seems that from version 121, Firefox will finally support it! 😉 caniuse.com/css-has
Hey, love the idea. Was just wondering if I wanted to make each image a link how would go about and do this, because I tried this in VS code and it keeps overlapping the images.
Thank you in advance.
That happens because the CSS needs to be updated (just slightly). Here's a demo with links:
Thank you so much!! This really helped a lot.
I do have another inquiry if its not too much trouble. I was wondering what would I have to change in the CSS to make the hovered image appear larger but not overlap with the other images(So they would still be clickable).
I don't fully understand the request (they are still clickable.) Maybe on hover you could remove the new clip-path and add a scale() instead.
Sorry if I was too confusing. I was just wondering how I could make the image bigger when hovering over it withour changing the initial size.
Nice effect! You should try out different transformations for revealing the full image, like rotating from rhombus to square, transforming from rhombus to circle to square, "unfolding" from rhombus to square, etc.
Speaking of the animation, I noticed that the transformation isn't symmetric: The top corners of the square come from the top corner of the rhombus (which looks fine), but the bottom-left and bottom-right corner of the square come from the bottom and right corner of the rhombus, respectively. This makes the transformation look off.
Very nice effect.
This is totally awesome, I LOVE IT! ✨
Way cool, friend!
*Please make another thing *
❤❤❤❤❤
Many good tips! Thank you!
Thank you so much for this!
When I use this code and dump it in the CSS validator, there is a parsing error around line 140 (the last .gallery entry). Can anyone help me clean it up or find the error?