La idea es que cuando el usuario pase el curso por encima del primer elemento este crezca, gracias a la pesudo clase Hover, y los demás elementos se corran lo suficiente para que dejen de verse gracias a "overflow: hidden;". Sin embargo, los elementos no se corren si no que se hacen más pequeños, incluso intente hacer crecer el primer elemento lo suficiente para que los demás elementos desaparezcan, pero siempre se quedan estancados hasta cierto punto y no se encojen más.
Aquí mi código html
<div class = contenedor>
<div class="bloque">
<div class="primero">
<img src="img/handshake.png">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem</p>
</div>
<div class="segundo">
<img src="img/online-payment.png">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem</p>
</div>
<div class="tercero">
<img src="img/online-payment.png">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem</p>
</div>
<div class="cuarto">
<img src="img/online-payment.png">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem</p>
</div>
</div>
</div>
</body>
</html>
Mi codigo Css:
.contenedor{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
margin:auto;
}
.bloque{
width: 900px;
height:40vh;
font-size: 20px ;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.primero, .segundo, .tercero, .cuarto{
text-align: center;
width: 300px;
height: 400px;
transition:all 2s;
}
.primero{
background-color: #371B58;
}
.segundo{
background-color: #4C3575;
}
.tercero{
background-color: #5B4B8A;
}
.cuarto{
background-color: #7858A6;
}
.primero:hover {
width:800px;
}