Touchscreen issues notwithstanding, hover effects like this are awful for usability. The hover overlay completely obscures the original image, making it impossible to read the snippet and enjoy the image at the same time.
The animation effect is more garish than anything, but this is a probably a personal quibble. It takes 200 ms for the hover effects to finish loading. I'd rather have the hover transition instantly, so I can spend less of my life watching text fade in.
The Chrome Web Store uses this to excess, with sliding panes flying everywhere. It looks great, but it's really painful to use.
There are times when I find hover effects really helpful from a usability perspective. For example, with the right parameters, you can make text preview panes expand to view the entire text panel, and if white space is well used, the hovering doesn't get in the way too much.
This said, and while I realize this is a demo to show what can be done with CSS3, and while it is impressive, it gives me a headache. I wonder how long before we see Pokemon-style photosensitivity-induced seizures from CSS3 in the hands of clueless web devs.
I agree with the seizure point. I think this is a bit too "nuts." I showed it to my friend who has frequent seizures and she agreed. I would not recommend CSS moving this quickly for general use.
Hover effects aren't awful for usability at all. It is about using this in the appropriate context.
They add two distinct advantages:
1) Ease of accessing additional information. Instead of having a click based event a rollout is 100x easier to accomplish and can reduce clutter on a page. This is accomplished by being clear with labels, such as a "More Info" or "Rollover for details". It is surprising to find out out how many users won't click.
2) Whimsy. The emotional impact these have is wonderful, and to discount it is to ignore the delight of this new medium.
As for the touchscreen issue, these would be handled in a click state. This is how hover menus are handled in iOS for example.
The animation effect is more garish than anything, but this is a probably a personal quibble. It takes 200 ms for the hover effects to finish loading. I'd rather have the hover transition instantly, so I can spend less of my life watching text fade in.
The Chrome Web Store uses this to excess, with sliding panes flying everywhere. It looks great, but it's really painful to use.