css hover pseudo class issue when "leaving hover"

Question

I'm trying to create a zoomable map that works when the mouse hovers over the map image, similar to how the maps work on Flickr (see the map on the right side-bar - http://www.flickr.com/photos/grynch108/5926065001/in/photostream/).

By default the map is zoomed out, when the mouse hovers over the map, it zooms in, and when the mouse hovers in the center of the map, it zooms further to street level.

I want to achieve this purely using CSS if possible (no JavaScript). I have it mostly working (it zooms in when mouse hovers over, and zooms again when mouse nears the center), however, after the mouse nears the center and it zooms fully, it will not zoom out again unless the mouse leaves the element completely. I would like it to zoom to the second level when the mouse leaves the center area. I hope that makes sense.

Here is a JSFiddle of what I have working. http://jsfiddle.net/garethlewis83/ejvRh/

NOTE: The CSS is generated from SASS, so I've included my SASS code below.

aside.photo-sidebar {
    margin-left:20px;
    width:296px;
    display: inline-block;
    vertical-align: top;

    div#photo-map {
        position: relative;

        a#map-zoom-out, a#map-zoom-in {
            position:absolute;
            height: 100px;
            width: 300px;
            top:0;
            left:0;
        }

        a#map-zoom-out {
            opacity: 1;
            z-index: 10;

            transition: all 0.25s ease;

            &:hover {
                opacity: 0;
            }
        }

        a#map-zoom-in {
            z-index: 5;
        }

        a#map-zoom-street {
            height: 20px;
            left: 140px;
            opacity: 0;
            position: absolute;
            top: 40px;
            width: 20px;
            z-index: 20;

            transition: all 0.25s ease;

            &:hover {
                opacity: 1;

                img {
                    display: block;
                }
            }

            img {
                display: none;
                margin: -40px 0 0 -140px;
            }
        }
    }
}

Answer 1

If you would consider using background images you could do something like this:

<div class="marker" href="#">°</div>
<div class="mymap"></div>

CSS:

.mymap {
    position:absolute;
    width:4px;
    height:16px;
    padding:42px 148px;
    background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=4&size=300x100&sensor=false);
    z-index:1;
}
.marker{
    position:absolute;
    top:22px;
    left:121px;
    padding:20px 27px 15px;
    background:none;
    z-index:2;
    color:red;
}
.mymap:hover {
    background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=8&size=300x100&sensor=false);
}
.marker:hover + .mymap {
    background-image:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=14&size=300x100&sensor=false);
}

Note the use of the adjacent selector to do the final zoom.

jsfiddle

in Sass it would be pretty simple:

.mymap {
    position:absolute;
    width:4px;
    height:16px;
    padding:42px 148px;
    background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=4&size=300x100&sensor=false);
    z-index:1;
    &:hover {
        background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=8&size=300x100&sensor=false);
    }
}
.marker {
    position:absolute;
    top:22px;
    left:121px;
    padding:20px 27px 15px;
    background:none;
    z-index:2;
    color:red;
    + .mymap {
    background-image:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=14&size=300x100&sensor=false);
    }
}

If you would use sprites instead of separate images, then you would also have all of the map images loaded with the first one already.