FlipCard with CSS3
This is a simple creation inspired from this post on CSS3Create. It's quite simple as you can see, all images are contained in a .scene3D
class which contains another div
.flip
and this div
contains an image and a div
with the hidden title.
So, when the user's mouse :hover
the image, the div
acheives a flip effect to reveal the title of the image, which is done using the transform
/transition
properties. This creation also use border-radius
, box/text-shadow
, and perspective
, and the background use gradient
. As this creation uses 3D transforms, it won't look good in any browser except Chrome or Safari.