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>