Question

I need the title to research and not sure what suitable in this case, the google map is annoying and it will crash the entire design of the website. may i know how could i make a curtain or image-like on top of the embeded google map, when user hover the image will slide up and showing the google map ?

Thank you for reply

Answer 1

I assume you have tried to place a <div> over the top of the map using jQuery to slide the curtain up?

This slides the wrong way, but you get the idea in this jsfiddle

HTML

<div id="map"></div>
<div id="curtain"></div>

CSS

#map{
    background-image: url('http://0.tqn.com/d/webtrends/1/0/e/2/-/-/google-maps-walk-2.jpg');
    height:400px;
    width:400px;
}

#curtain{
    background-image: url('http://www.vectordiary.com/isd_tutorials/005_curtain/step02_2.gif');
    height:400px;
    width:400px;
    margin-top:-400px;
}

jQuery

$('#curtain').click(function(){
    $(this).slideUp("slow");
});