HTML5 : Responsive Image using CSS3

Responsive web design (RWD) provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)

I was interested in creating responsive webpage image without use of Javascript,I found few interesting links and hence I am sharing it here.This page is created using the normal HTML5 and CSS3

Here JPG image is positoned relative to the screen.There are eight hotspots created on each animals.For each hotspots the dimensions are specified in <style> tag

<style>

 .hotspot {left: 7%;

       top: 11%;

       width: 20%;

       height: 26%;}

</style>

Hover/tap the hotspots over the image to show a general information of the hotspot and onclick on it will redirect to link page. In this case it will be redirected to Wikipedia webpage.

This webpage is easy to create. It supports IE7+, Firefox, Chrome, Safari, Opera, iOS and Android OS, including Touch Screen Devices

GiraffeGiraffes are the tallest land animals.There neck and feet are 6 feet long.A male giraffe can weigh as much as a pick up truck!

LionLions are the second largest big cat species in the world.The roar of a lion can be heard from 8 kilometers away.In the wild, they rest for around 20 hours a day!

CraneCranes are large, long-beaked birds.They are an omnivorous bird.They can grow to an average of 1 meter in height.They are quiet agile flyers!

ZebraZebras are members of the horse family. They have excellent hearing and eyesight and can run at speeds of up to 35 miles per hour.Zebras communicate with facial expressions and sounds.

ButterflyButterflies are insects.They sip nectar, sap, and juices from fruit.They often have brightly coloured wings with unique patterns made up of tiny scales.

HippopotamusThe name "hippopotamus" comes from Greek words meaning "water or river horse"!.Their eyes, ears, and nostrils are on top of their head. They can see, hear, and breathe while most of their body is underwater.

RoosterAn adult male chicken is called a “rooster”.They are larger, usually more brightly colored, and have larger combs on top of their heads.They scratch and claw at the ground, looking for food.

SnakeSnakes are elongate, legless, carnivorous reptiles of the suborder Serpentes that can be distinguished from legless lizards by their lack of eyelids and external ears.