Tengo un div y en su interior contiene una imagen. Bajo este div hay un texto que solo se verá cuando desplace el div. Esto quiero que ocurra cuando pulse la imagen del div superior. En ese momento el contenedor se desplazará y dejará ver el texto que hay en la capa inferior.
De momento he utilizado la pseudoclase :focus para marcar la imagen al hacer click en ella, de manera que esta añade sombra y modifica el tamaño, pero ahora no se como hacer para que el div contenedor se desplace en la misma acción hacia un lado y deje ver la capa inferior.
.seccion{
display: flex;
position: relative;
margin-top: 80px;
justify-content:center;
}
.contactos{
position: relative;
height: 100%;
width: 50%;
align-items: center;
z-index: -100;
}
.contactos div{
padding: 30px;
z-index: -100;
}
.contactos2{
background-color: transparent;
position: absolute;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
z-index: 100;
}
.contactos3{
background-color: #000000;
padding: 10px 0;
width: 100%;
height: 33%;
text-align: center;
}
#git{
width: 80px;
height: 80px;
border-radius: 10px;
}
#git:hover{
box-shadow: 0 8px 8px 0 rgba(255, 215, 0, 0.5);
}
#git:focus{
width: 120px;
height: 120px;
transition: 1s;
}
#mail{
width: 80px;
height: 80px;
border-radius: 10px;
}
#mail:hover{
box-shadow: 0 8px 8px 0 rgba(255, 215, 0, 0.5);
}
#mail:focus{
width: 120px;
height: 120px;
transition: 1s;
}
#link{
width: 80px;
height: 80px;
border-radius: 10px;
}
#link:hover{
box-shadow: 0 8px 8px 0 rgba(255, 215, 0, 0.5);
}
#link:focus{
width: 120px;
height: 120px;
transition: 1s;
}
<section class="seccion">
<div class="contactos2">
<div class="contactos3" id="gitdiv"><img id="git" tabindex="0" src="imagenes/git.png"/></div>
<div class="contactos3" id="maildiv"><img id="mail" tabindex="0" src="imagenes/gmail.png"/></div>
<div class="contactos3" id="linkdiv"><img id="link" tabindex="0" src="imagenes/linkdin.png"/></div>
</div>
<div class="contactos">
<div>
<img src="imagenes/neon.png"/>
</div>
<div>
<img src="imagenes/matemaki.png"/>
</div>
<div>
<img src="imagenes/linkedin.png"/>
</div>
</div>
</section>