There is this card element and it has two sections, one for an image, and another section acting like a description for the image. I want the image to expand downward when the user hovers on one of the cards (as a way to show that image more prominently). I did that transition, and I did it by increasing the flex on hover:
.card:hover .picture-section{ flex:3;}and this partially worked. However, the picture expands downwards correctly but it is also expanding horizontally (not the card but the image itself is sort of zooming in). I have no idea how/why, since the flex direction is column (also I am kind of new to this).
I tried lots of things like, instead of flex I tried with height changing. I tried to change the min, max, width of the image, but nothing seemed to work, except for changing the width of the card itself. However, I don’t want to change that.
.cards { display: flex; flex-wrap: wrap; gap: 4rem;}.card { height: 15rem; width: 12rem; border: 2px solid blue; display: flex; flex-direction: column;}.card .picture-section { border: 2px solid black; flex: 1; flex-wrap: wrap; min-height: 0; transition: all 0.5s;}.card .picture-section img { object-fit: cover; width: 100%; height: 100%; min-width: 0; transition: all 0.5s;}.card:hover .picture-section { flex: 3;}.card .card-text { border: 2px solid red; flex: 1.5;}<div class='cards'><div class='card'><div class='picture-section'><img src = "https://picsum.photos/200/300"></div><div class='card-text'><p>Emmanuel Jean Joseph</p></div></div><div class='card'><div class='picture-section'><img src = "https://picsum.photos/200/600"></div><div class='card-text'><p>Emmanuel Jean Joseph</p></div></div><div class='card'><div class='picture-section'><img src = "https://picsum.photos/400/300"></div><div class='card-text'></div></div><div class='card'><div class='picture-section'><img src = "https://picsum.photos/300/600"></div><div class='card-text'></div></div><div class='card'><div class='picture-section'></div><div class='card-text'></div></div><div class='card'><div class='picture-section'></div><div class='card-text'></div></div></div>