0

Mi problema es el siguiente: Para hacer un efecto hover necesito de position relavite y absolute, pero el problema es que la altura del padre, no se ajusta a la de los hijos, entonces el ultimo <p>, que seria el pie de foto, queda por fuera del padre (el efecto hover esta dentro en flexbox). En el diseño para computadoras se ve bien, pero intentándolo adaptar a dispositivos móviles es cuando la imagen con position absolute rompe con el orden, y el padre llega mas o menos a la mitad del primer flexbox (son dos en total).

*{
  padding:0;
  margin:0;
  box-sizing:border-box; 
}
h1{
  font-size: 6vw;
  margin: 3%;
  text-align: center;
}
.cuerpo {
    display: flex;
    margin:6%;
    flex-direction:row;
    height: 100vh;
 }
.cuerpo .izquierda {
  flex:1;
  flex-basis:50%;
  margin: 0% 3%;    
  background-color:bisque;
  outline: dashed black;
  height:100vh;
}
.derecha{
  text-align:center;
  flex:2;
  flex-basis:50%;
  outline: dashed black;
  margin: 0% 3%;
  background-color:bisque;
  height:100vh;
}
.izquierda p,
.derecha p{
    margin: 3% 5%;
    text-align:justify;
}
.izquierda h2, .derecha h2{
    font-size: 3vw;
    text-align:center;
}
/* Imagen hover */
.hover{
    overflow:hidden;
    position: relative;
    width: 70%;
    height:60%;
    border: 5px solid black;
    display:block; 
    margin:auto;
}
.hover img{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width: 100%;
    height:100%;
    transition: all 500ms cubic-bezier(1,0,0,1);
}
.hover .derechaimg{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width: 100%;
    height:100%;
    transition: all 500ms cubic-bezier(1,0,0,1);
}
.hover .derechaa{
    color: white;
    width: 50%;
    height: 20%;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    margin:auto;
}
.hover a.video{
    color: white;
    position:absolute; 
    top:44%;
    left:20%;
}
.hover a{
    color:white; 
    position:absolute; 
    top:44%;
    left:25%;
    text-decoration:none;
    font-size: 2vw;
    background-color: black;
    border: 2px solid white;
    padding: 2%;
    z-index: 0;
    transform: scale(0);
    transition: all 400ms;
}
.hover:before,
.hover:after{
    content:"";
    width: 200%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    background: black;
    border: 1vw solid black;
    opacity: 0.7;
    z-index:3;
    transition: all 400ms;
}
/* Hover */
.hover:hover img{
    transform: scale(1.3) rotate(-7deg);
}
.hover:hover .derechaimg{
    transform: scale(1.3) rotate(15deg);
}
.hover:hover a{
    transform: scale(1);
    z-index:6;
}
.hover:before{
    transform: rotate(45deg) translateY(-120%) translateX(-17%)
}
.hover:after{
    transform: rotate(45deg) translateY(150%) translateX(-20%);
}
.hover:hover:before{
    transform: rotate(45deg) translateY(-20%) translateX(-17%);
}
.hover:hover:after{
    transform: rotate(45deg) translateY(85%) translateX(-20%);
}
/* Responsive */
@media screen and (max-width: 800px){
  .cuerpo{
    flex-direction: column;
    height:1000px;
    border: 10px solid black;
  }
  .izquierda h2,
  .derecha h2{
    font-size: 32px;
  }
  .cuerpo .izquierda,
  .cuerpo .derecha{
    margin-top: 10%;
    padding-bottom: 30%;
  }
  .hover a{
    font-size: 16px;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="anterior.css" rel="stylesheet" type="text/css" />
  <title>Pruebas2</title>
</head>
<body>
  <h1>Pruebas</h1>
  <div class="cuerpo">
          <div class="izquierda">
                <h2>Reto semanal</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus nemo rerum, minima eum illo sint quaerat adipisci, qui obcaecati voluptatum provident excepturi error sequi tempore, illum nesciunt odio ullam optio.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus nemo rerum, minima eum illo sint quaerat adipisectetur adipisicing elit. Natus nemo rerum, minima eum illo sint quaerat adipisci, qui obcaecati voluptatum provident excepturi error sequi tempore, illum nesciunt odio ullam optio.sci, qui obcaecati voluptatum provident excepturi error sequi tempore, illum nesciunt odio ullam optio.</p>
                <div class="hover">
                    <img src="img.png"alt="Imagen reto anterior">
                    <a href="#" class="derechaa">Lorem, ipsum dolor.</a>
                </div>
                <!-- Pie de foto-->
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur, ad?</p>
            </div>
            <div class="derecha">
                <h2>Reto semanal</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus nemo rerum, minima eum illo sint quaerat adipisci, qui obcaecati voluptatum provident excepturi error sequi tempore, illum nesciunt odio ullam optio.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus nemo rerum, minima eum illo sint quaerat adipisectetur adipisicing elit. Natus nemo rerum, minima eum illo sint quaerat adipisci, qui obcaecati voluptatum provident excepturi error sequi tempore, illum nesciunt odio ullam optio.sci, qui obcaecati voluptatum provident excepturi error sequi tempore, illum nesciunt odio ullam optio.</p>
                <div class="hover">
                    <img src="img.png"alt="Imagen reto anterior">
                    <a href="#" class="derechaa">Lorem, ipsum dolor.</a>
                </div>
                <!-- Pie de foto -->
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur, ad?</p>
            </div>
        </div>
  </div>
</body>
</html>

Intente usar una linea de javascript, pero como no se mucho de javascript, no me funcionaron y tampoco se que hacer para arreglarlo.
Recomiendo verlo en pantalla completa para evitar problemas con el tamaño y el efecto hover. Gracias por tomarse el tiempo de responder.

1
  • Sería bueno que edites la pregunta y agregues una imagen para mostrar cómo se ve ahora y otra de cómo debería verse o, al menos, que expliques más a detalle el error.
    – Triby
    el 23 jun. 2021 a las 20:52

1 respuesta 1

0

Creo que puedes solucionarlo cambiando las reglas .cuerpo

.cuerpo {
    display: flex;
    margin:6%;
    flex-direction:row;
    /*#height: 100vh;*/
    height: fit-content
 }
.cuerpo .izquierda {
  flex:1;
  flex-basis:50%;
  margin: 0% 3%;    
  background-color:bisque;
  outline: dashed black;
  /*height:100vh;*/
}
.derecha{
  text-align:center;
  flex:2;
  flex-basis:50%;
  outline: dashed black;
  margin: 0% 3%;
  background-color:bisque;
  /*height:100vh;*/
}


.hover img{
    /*position: absolute;*/
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width: 100%;
    height:100%;
    transition: all 500ms cubic-bezier(1,0,0,1);
}

He comentado los estilos que he cambiado o quitado. Por lo que he probado funciona responsive, para probar he usado una imagen cuadrada de 600x600 (el css me la deja a 441x430px
Espero que te sirva o te sea útil

Tu Respuesta

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

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