0

Tengo un problema. Tengo estos divs con imágenes de fondo y les estoy ampliando el ancho cuando hago hover, pero las imágenes no se mantienen en línea y las envía hacia abajo, y además como que se traban al ampliarlas. ¿Cómo hago para que las imágenes cambien su ancho en la línea en la que están y que no envíe las otras imágenes hacia abajo y no se traben?

También como algo extra puse un texto y lo estoy tratando de poner en medio horizontal y vertical y que el texto aparezca de igual manera cuando se hace hover en el div y se amplia de tamaño.

.imgs-cont{
    width: 100%;
    background-color: greenyellow;
    text-align: center;
}
.img-cont{
    display: inline-block;
    width: 19%;
    height: 500px;
    transition: width 0.5s;
    background-position: center;
    background-size: cover;
    color: white;
}
.img-cont:hover{
    width: 50%;
}
#img1{
    background-image: url('https://cdn.pixabay.com/photo/2018/03/27/21/43/startup-3267505_960_720.jpg');
}
#img2{
    background-image: url('https://cdn.pixabay.com/photo/2016/02/19/11/19/office-1209640_960_720.jpg');
}
#img3{
    background-image: url('https://cdn.pixabay.com/photo/2016/01/19/17/53/writing-1149962_960_720.jpg');
}
#img4{
    background-image: url('https://cdn.pixabay.com/photo/2018/02/27/06/30/skyscraper-3184798_960_720.jpg');
}
#img5{
    background-image: url('https://cdn.pixabay.com/photo/2015/09/09/19/56/office-932926_960_720.jpg');
}
<html>
<head>
    <title>Document</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="imgs-cont">
        <div class="img-cont" id="img1">
            <p>Texto</p>
        </div>
        <div class="img-cont" id="img2">
            <p>Texto</p>
        </div>
        <div class="img-cont" id="img3">
            <p>Texto</p>
        </div>
        <div class="img-cont" id="img4">
            <p>Texto</p>
        </div>
        <div class="img-cont" id="img5">
            <p>Texto</p>
        </div>
    </div>
</body>
</html>

2 respuestas 2

2

.imgs-cont{
    display: flex;
    justify-content: space-around;
    width: 100%;
    background-color: greenyellow;
}
.img-cont{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 19%;
    height: 500px;
    transition: width 0.5s;
    background-position: center;
    background-size: cover;
    color: white;
}
.img-cont:hover{
    width: 50%;
}
#img1{
    background-image: url('https://cdn.pixabay.com/photo/2018/03/27/21/43/startup-3267505_960_720.jpg');
}
#img2{
    background-image: url('https://cdn.pixabay.com/photo/2016/02/19/11/19/office-1209640_960_720.jpg');
}
#img3{
    background-image: url('https://cdn.pixabay.com/photo/2016/01/19/17/53/writing-1149962_960_720.jpg');
}
#img4{
    background-image: url('https://cdn.pixabay.com/photo/2018/02/27/06/30/skyscraper-3184798_960_720.jpg');
}
#img5{
    background-image: url('https://cdn.pixabay.com/photo/2015/09/09/19/56/office-932926_960_720.jpg');
}
<html>
<head>
    <title>Document</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="imgs-cont">
        <div class="img-cont" id="img1">
            <p>Texto</p>
        </div>
        <div class="img-cont" id="img2">
            <p>Texto</p>
        </div>
        <div class="img-cont" id="img3">
            <p>Texto</p>
        </div>
        <div class="img-cont" id="img4">
            <p>Texto</p>
        </div>
        <div class="img-cont" id="img5">
            <p>Texto</p>
        </div>
    </div>
</body>
</html>

Hola, yo lo hice con display flex. Así utilizo la propiedad justify-content y align-items que me sirve para alinear o redistribuir el contenido.

1
  • Si, era por eso. Y con lo del texto, como le puedo hacer para que cuando haga hover en el div, además de que el div se haga más ancho, que el texto aparezca?
    – Ed Gar
    el 19 jul. 2021 a las 18:09
0

me atreví a resolver lo que comentabas en la otra respuesta.

Para hacer que el texto aparezca, debes controlar el display del parrafo.
Primero no se verá, por lo que inicializamos con display: none;

Posteriormente, este aparecerá, pero si no quieres que aparezca de golpe, le agregamos un fade-in que queda perfecto para el tema.

Acá ya puedes controlar el resto, color, duración de la animación, etc.

.imgs-cont {
  display: flex;
  justify-content: space-around;
  width: 100%;
  background-color: greenyellow;
}

.img-cont {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 19%;
  height: 500px;
  transition: width 0.5s;
  background-position: center;
  background-size: cover;
  color: white;
}

.img-cont:hover {
  width: 50%;
  display: flex;
  font-weight: 800;
}

.img-cont .txt {
  display: none;
  animation: fadeIn 0.8s;

}

.img-cont:hover .txt {
  display: flex;
  animation: fadeIn 0.8s;
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#img1 {
  background-image: url('https://cdn.pixabay.com/photo/2018/03/27/21/43/startup-3267505_960_720.jpg');
}

#img2 {
  background-image: url('https://cdn.pixabay.com/photo/2016/02/19/11/19/office-1209640_960_720.jpg');
}

#img3 {
  background-image: url('https://cdn.pixabay.com/photo/2016/01/19/17/53/writing-1149962_960_720.jpg');
}

#img4 {
  background-image: url('https://cdn.pixabay.com/photo/2018/02/27/06/30/skyscraper-3184798_960_720.jpg');
}

#img5 {
  background-image: url('https://cdn.pixabay.com/photo/2015/09/09/19/56/office-932926_960_720.jpg');
}
<html>

  <head>
    <title>Document</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  </head>

  <body>
    <div class="imgs-cont">
      <div class="img-cont" id="img1">
        <p class="txt">Texto</p>
      </div>
      <div class="img-cont" id="img2">
        <p class="txt">Texto</p>
      </div>
      <div class="img-cont" id="img3">
        <p class="txt">Texto</p>
      </div>
      <div class="img-cont" id="img4">
        <p class="txt">Texto</p>
      </div>
      <div class="img-cont" id="img5">
        <p class="txt">Texto</p>
      </div>
    </div>
  </body>

</html>

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.