Example of CSS3 and JavaScript- Interactive Stacked Cards

Move your mouse over the cards.
The card moves to the top of the stack. The card rotates a bit, enlarges, and the picture changes.

Card 1

Toucan

Name: Toucan
Age: 5
Size: 50 cm
Weight: 600 g
Food: Fruit
Toucan lives in southern and central America and loves to fly around.

Card 2

Fox

Name: Fox
Age: 3
Size: 70 cm
Weight: 5.5 kg
Food: Meat
Fox lives in the northern hemisphere and loves to play seek and hide.

Card 3

Dog

Name: Dog
Age: 8
Size: 120 cm
Weight: 10 kg
Food: Bones
Dog lives in a dog hut and loves to chew shoes, bark and go for walks.

Card 4

Elephant

Name: Elephant
Age: 80
Size: 300 cm tall
Weight: 5500 kg
Food: Grass, leaves, bark, roots, bamboo
Elephant lives in the savanna or the rain forest and is very smart!

Card 5

Lion

Name: Lion
Age: 12
Size: 190 cm
Weight: 180 kg
Food: Meat
Lion lives in Africa and loves to sleep most of the day and hunts sometimes.

Code based on code from the blog DesignLovr.com      Animal images courtesy of Tutorial 9