Crear una transición

Cuando el usuario pase con el cursor por encima este <div> se volverá totalmente transparente con una transición que tendrá una duración de 1 segundo, dejando ver el mapa que hay debajo.

Por ello, el siguiente paso es la creación de este <div> con información complementaria, que a ir ubicado en el HTML justo después de cerrar el <div> del mapa (</div>).

     ...style="border:0"></iframe>
 </div>

 <div id="tapa">
     <b>Aprende jugando,S.L.</b>
     Passeig de Gràcia, 114 .
     Barcelona (08008)<p>
     Teléfono: 93.465.61.83<br>
     e-mail:aprende@jugando.com<br>
     web:www.aprendejugando.com<br>

   <div id="reducir">
          Ver mapa
   </div>
 </div>

</section>

#tapa{  
  width:485px;
  height:425px;
  padding:5px 0 0 25px;
  font-size:14px;
			
  position:absolute;
  right:0;
  bottom:0;

  transition:opacity 1s;
  -webkit-transition:opacity 1s;
  -moz-transition:opacity 1s;
  -o-transition:opacity 1s;
  -ms-transition:opacity 1s;

  background:url("img/logo.png");
  background-repeat:no-repeat;
  background-position:330px -15px;
  background-color:rgba(255,255,255,
  0.8);
}

#tapa:hover{
  opacity:0;
  cursor:pointer;
}

#reducir{
  font-family:titulares;
  position:absolute;
  width:90%;
  bottom:50%;
  font-size:32px;
  text-align:center;
}