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.

Back to Jan's Web Scripting Demo

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