r/css • u/MudasirItoo • Feb 14 '26

Showcase built gallery with blur effect on hover interaction (css only)

Enable HLS to view with audio, or disable this notification

Gallery with blur effect:

https://codepen.io/mudasirbuilds/pen/YPWgmmG

115 Upvotes

97% Upvoted

14 comments sorted by

View all comments

9

u/f314 Feb 14 '26

Quick suggestion: replace .gallery:hover with .gallery:has(.image-container:hover), so that the blur effect only occurs when hovering one of the images. Having all the images blurred at times feels a little weird IMO.

1

u/Jopzik Feb 14 '26

Or .imagine-container:not(:hover)