CSS animated profile cards

Whoah, been a while since I’ve posted something! Yet, I wanted to mess around with some fun CSS3 stuff and wanted to share the results with you. Today, we’re going to create CSS animated profile cards. Although there are four different kind or animations (Push, Slide, 3D Flip and Explode), they all share the same kind of HTML structure. Simply hover over the images to see the contact details.

The pictures used are created by Belovodchenko Anton, but their profile data is fake. -prefix-free has been used to remove the vendor prefixes in CSS. All animations are done with the help of the transition property.

Take note of the [EFFECT] ID that is used at top level. This way, we can make several different effects simply by using another ID. This is a key part of the shared code. Now to dive into the CSS. I’ve stripped out all the non-important stuff (font-size, width etc.) and stripped it to the bare minimum:

Slide

/* In the default state, the info box has been slightly moved to the left */
#slide .info {
transition: all 0.3s;
transform: translate(-50px, 0);
}
#slide .pic {
transition: all 0.3s;
}
/* In the hover state, the info box has been moved to the original position and faded in */
#slide li:hover .info {
opacity:1;
transform: translate(0, 0);
}
/* In the hover state, the picture has been moved to the right and is faded out */
#slide li:hover .pic {
opacity:0;
transform: translate(50px, 0);
}