1

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

1 respuesta 1

0

Con display: flex los hijos del elemento que lo lleve van a verse siempre forzados a mostrarse en la misma línea. A través de flex-wrap: wrap podemos hacer que los hijos de elemento fluyan a otras líneas, consiguiendo ese efecto de que "desaparezcan" que quieres conseguir.

.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;
  flex-wrap: wrap; /* Para que los hijos del elemento puedan fluir a otras líneas */
}

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

1
  • Excelente!! Me ayudo mucho, pero, por casualidad se puede hacer de una forma mas transitoria, de tal forma que los elementos se hagan pequeños primero y luego desaparezcan, estaba intentando con " transition" pero no se ve tan fluido, Alguna idea? el 1 jun. 2022 a las 16:51

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.