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.