fwi map hover blinds

by mrjordy

HTML

<div id="map-container">
   <a href="#">
       <div class="map">
           <img src="http://falconwood.us/wp-content/uploads/2015/05/falconwood-location-san-diego-cropped.png" alt="location">
       </div>
          <span class="map-text">Click Me!</span>
    </a>
 </div>

CSS

#map-container {
    position: relative;
    border: 3px solid rgb(92, 156, 224);
    -webkit-box-shadow: 0 8px 14px -4px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 8px 14px -4px rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 14px -4px rgba(0, 0, 0, 0.25);
    border-radius:10px;
    overflow: hidden;
    max-width: 720px;
}
#map-container a {
    position: relative;
    display: block;
    width: 720px;
    height: 288px;
    background: #3e9bd6;
    text-align: center;
    text-decoration: none;
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 45px;
    font-weight: 600;
    color: #fff;
}
#map-container a span.map-text {
    display: block;
    width: 720px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); 
    text-align: center;
}
#map-container a .map {
    position: relative;
    top: 0;
    z-index: 1000;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#map-container a:hover .map {
    top: -288px;
}