Quiero hacer una página que tiene de fondo una imagen (1.jpg), sobre ella he colocado otra imagen (2.png) y las he sobrepuesto.
Hasta ahí bien.
El problema:
Quiero hacer que la imagen superpuesta (2.png) realice una animación de transparencia, de 0 a 1 al hacer click sobre cualquier punto de la imágen de fondo (1.jpg). Y que al hacer click sobre ella misma, vuelva a la posicion inicial. Sin incorporar botones extra.
El codigo que tengo:
HTML
<div id="contenido" >
<div id="imagenfondo" onClick="mostrar()">
</div>
<div id="animacion" onClick="esconder()">
<div id="mensaje">
En construcción
</div>
</div>
JAVA
<script type="text/javascript">
function mostrar(){
document.getElementById(animacion.style.visibility ="visible");
}
function esconder(){
document.getElementById(animacion.style.visibility ="hidden");
}
</script>
CSS
#animacion{
background: url(../img/construccion.jpg) center center no-repeat;
background-size:contain;
width:1067px;
height:600px;
margin:auto;
position:absolute;
z-index:3;
opacity:1;
visibility:hidden;
-webkit-animation: trans 5s;
}
@-webkit-keyframes trans {
0%{opacity:0}
100%{opacity:1}
}
Con esto funciona bien, pero la animación de la transparencia solo aparece si realizo click antes de los 5 primeros segundos de cargar la página, luego ya no aparece dicha animación.
Que soluciones hay para resolver este problema?
Gracias de antemano.