Image Gallery
I worked on this concept for an image gallery the other day. I was trying to go for a "kaleidoscope" type of look, with the images merging and blending into each other and animating on hover. However, I feel it only got there halfway: I like the idea but am not in with the execution.
Things I like:
The look-and-feel: how the images are organized into slices of the circle.
The animation: I did several versions playing with filters and transitions. This one may be too basic, but it's my type of basic.
The simplicity of the code: it's just a div with six img inside. No fancy structures, no gimmicks, just a container with images.
What I don't like:
The CSS is overcomplicated: masks help with the blending but fail to avoid clicking, and the combination of mask and clip-path is hideous and doesn't help with transitions. It is a circle... maybe trigonometry functions to the rescue?
The look-and-feel: it was in the pros, but it's in the cons, too. The images look too small, not enough view even after the animation.
It needs to be uglier: We need to add properties into the HTML to exploit its real potential. They would be valid, but they'd make the code considerably uglier.
*I need to clean up the HTML, use local images, and add alternative text. Please, don't judge me for that :P