hover zoom & click effect on CSS background-image - Jquery

Question

**Scenario 1

I have a map with locations on it, once a location is hovered over i would like the icon to enlarge/grow and a div containing the name of the location to slide in from the side, in the div below, then once the mouse-cursor leaves the icon area i would like the div and the name of the location to slide back (completely disappearing) and then return the location icon to its original size.

**Scenario 2

Once hovered over & then clicked i would like the icon to remain at its enlarged size displaying the actual address underneath the location name, until it or another icon has been selected / clicked.

I have made a start on the jsfiddle below but cant seem to get much further as i am fairly new at working with jquery:

http://jsfiddle.net/gavAusWeb/sCFX2/2/

A live example of what im trying to achieve can be found here towards the bottom right hand side of the page.

http://www.aviationgroundhandling.com.au/

Thanks in advance !! :)

ps. i am using a CMS so it has to be done with background-images, cheers ;)

Answer 1

zoom is not what you think it is. In fact, zoom is a IE only "feature", that is often used to trigger hasLayout when bugs arise. It is NOT a feature to adjust the browser's or element's zoom. For what you want to do, you can use css3 transitions, scale in particular. Or SVG could be an option too. Finally, less elegant you could use jQuery to animate an image sprite containing different frames.