In this article I will introduce you to an application from Webkit and that CSS3 hover effects for pictures with many different options. However, one drawback is that only Google Chrome and Safari 4 support new effects. So to be able to view the most complete demo article, you should open in Chrome or Safari browsers.
Come on let's begin to learn each effect but 2 brings.
Photo Effect Self-scaled
In effect, the image will automatically zoom out when you drag the image. It is done by -webkit-transform attributes: scale (value)
Photo effects fade
When you drag the photo, it will automatically reduce the opacity to 50%
In effect, when you drag the image, hiding the dimmed automatically and simultaneously descriptive information will be displayed.
Slide Out Effects
In this effect, they will be sliding to the right when you mouse and display information described.
Slide Effects In Box
Descriptive information will be pulled from left to right as you drag.
Zoom in effect
In this effect, a description will be enlarged from the middle of the image as you drag.
The effect on just one of the ones that Webkit engine can do for you. Again, remind yourself you are the only possible effect on a good run on the Chrome browser and Safari 4+ at the time I wrote this article. I hope that someday, all currently popular browsers will support good for this effect.
Good luck !