Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Los divs no se amplian en la misma área

CSS - Los divs no se amplian en la misma área

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Enrique
Val: 5
Ha aumentado su posición en 136 puestos en CSS (en relación al último mes)
Gráfica de CSS

Los divs no se amplian en la misma área

Publicado por Enrique (3 intervenciones) el 19/07/2021 18:51:14
Hola gente. 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<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/bootstrap@4.6.0/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>
 
<style>
.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');
}
</style>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de pablo

Los divs no se amplian en la misma área

Publicado por pablo (37 intervenciones) el 19/07/2021 19:42:41
Hola, desde mi punto de vista creo que es solamente ponerle flex no inline-block por que eso toma todo como un bloque y despues ajustas la dirección para que sea una fila, con lo del texto no sé si lo que modifiqué es lo que estás buscando ya que no entendí muy bien, una sugerencia intenta aplicarle un color de texto adecuado a las imágenes, te dejo el código.

Saludos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.imgs-cont{
    width: 100%;
    background-color: greenyellow;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content:center;
}
.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: red;
}
.img-cont:hover{
    width: 50%;
    font-size:30px;
}
 
 
#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');
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar