0

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>

1 respuesta 1

1

Puedes hacer con traslate de css, ese efecto lo puedes asignar a la etiqueta img de html, con el efecto al hacer ":focus" o click la animacion seria así:

.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;
}


/*Aqui le damos la animacion a la etiqueta img*/

img {
  height: 50px;
  background-color: rgb(11, 35, 30);
  width: 25%;
  transition: 2000ms all cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateX(-22%);
  left: 30px;
}


/*img al hacer focus*/

img:focus {
  transform: translateX(60%);
  left: 0px;
}
<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>

Y también puede ser al hacer :hover:

.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;
}

/*Aqui le damos la animacion a la etiqueta img*/
img {
  height: 50px;
  background-color: rgb(11, 35, 30);
  width: 25%;
  transition: 2000ms all cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateX(-22%);
  left: 30px;
    }


/*img al hacer hover*/
img:hover{
  transform: translateX(50%);
  left: 0px;
}
<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>

2
  • Está bien si lo que busco es mover la img. Realmente lo que necesito no es desplazar la img en si. Busco que, al hacer click sobre la imagen, el contenedor completo se mueva. Tal vez esto es con JS, que pulsando un elemento dentro de un contenedor se desplace el contenedor completo.
    – Jose L.
    el 30 jul. 2022 a las 14:23
  • Agrega el traslate al div y no al img, con eso funciona, y claro, también lo puedes hacer con Javascript, pero seria lo mismo, debes crear una función que modifique los estilos css. el 1 ago. 2022 a las 15:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.