There are various style options here, but each brings the reveal text content and filters upon hovering.
This collection of hover effects proves that you don’t need to be over-the-top to make a strong impression.
While it’s not quite as psychedelic, it’s no less impressive. Hovering quickly puts it all back together. Here, the photograph appears to be split up within a grid layout. Want more mind-blowing fun? Here’s another example from Dimitra Vasilopoulou, who also created the reality-shifter above. It’s highly detailed, confusing, and mind-blowing all at once.
As you hover over various parts of this building, blocks shift and scroll based on your cursor direction. Go ahead, play around with this example and see if you can keep your vision straight. It not only looks cool, but it also provides some context for users. But in this case, it seems like it would be a perfect hover effect to implement for photo galleries. Here’s a snippet that brings to mind someone unfolding a hand of playing cards for all to see. Amazingly, the vast majority of the work is done by CSS alone. It’s also reminiscent of the opening credits to a TV show. This combination of skewed caption containers, sharp typography, and quick animation is powerful. Of particular note here are the CSS3 filter effects, as they bring sepia and grayscale images to full color upon hovering. But that speed doesn’t take away their potency. What’s great about this collection of hover effects is that they provide instant gratification. This technique results in cinematic-quality effects that would be otherwise difficult to achieve. From there, CSS filters are separately added to each image. This clever use of CSS and JS duplicates the image and layers them on top of each other.
0 kommentar(er)
