У меня есть несколько карточек. В карточке есть елемент блок с картинкой обрезаная по краях 318x180 настоящий размер 350х198 заголовок текст и кнопка прижата к низу с помощью флекс. Мне нада при увеличении блока чтоб ничего не сьежало а блок с картинкой стал под размер картинки с ефектом выхода из краем и появлением новых деталей картинки. Что я имею все кроме того что у меня сьежают все кнопки из всех блоков. Если текст отсутствует то все работает как задумано. Спасибо)) для вопроса взята картинка большего размера
Код codepen https://codepen.io/anton-mkt/pen/vYJbwdo
html
div class="wrapper-call__row">
<div class="wrapper-call__colum" >
<div class="wrapper__call">
<div class="call__colums_img"><img src="https://gamesqa.ru/wp-content/uploads/2017/11/sh-overview.jpg" alt=""></div>
<div class="call__colums_title"><span>Call of Duty: WWII</span></div>
<div class="call__colums_text">The C.O.D.E. Bravery Pack is now available in WWII</div>
<div class="call_colums_button "><a href="#">See Details</a></div>
</div>
</div>
<div class="wrapper-call__colum" >
<div class="wrapper__call">
<div class="call__colums_img"><img src="https://gamesqa.ru/wp-content/uploads/2017/11/sh-overview.jpg" alt=""></div>
<div class="call__colums_title"><span>Destiny 2</span></div>
<div class="call__colums_text">The C.O.D.E. Bravery Pack is now available in WWII</div>
<div class="call_colums_button "><a href="#">See Details</a></div>
</div>
</div>
<div class="wrapper-call__colum" >
<div class="wrapper__call">
<div class="call__colums_img"><img src="https://gamesqa.ru/wp-content/uploads/2017/11/sh-overview.jpg" alt=""></div>
<div class="call__colums_title"><span>STEEP</span></div>
<div class="call__colums_text"></div>
<div class="call_colums_button "><a href="#">See Details</a></div>
</div>
</div>
<div class="wrapper-call__colum" >
<div class="wrapper__call">
<div class="call__colums_img"><img src="https://gamesqa.ru/wp-content/uploads/2017/11/sh-overview.jpg" alt=""></div>
<div class="call__colums_title"><span>Forza Motorsport 7</span></div>
<div class="call__colums_text"></div>
<div class="call_colums_button "><a href="#">See Details</a></div>
</div>
</div>
</div>`
css
.wrapper-call__colum {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 320px;
}
.wrapper__call {
-webkit-transition: 0.2s;
transition: 0.2s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 4px;
border: solid 1px #8DD83D;
background: #fff;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
max-width: 320px;
}
.wrapper__call:hover {
position: relative;
max-width: 352px;
z-index: 100;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.wrapper__call:hover .call__colums_img {
height: 198px;
width: 350px;
}
.call__colums_img {
-webkit-transition: 0.2s;
transition: 0.2s;
height: 180px;
width: 318px;
background: #000;
position: relative;
overflow: hidden;
}
.call__colums_img img {
position: absolute;
-o-object-fit: cover;
object-fit: cover;
}
.call__colums_title {
color: #435766;
font-size: 18px;
padding: 22px 0 0 22px;
}
.call__colums_text {
overflow: hidden;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
color: #435766;
font-size: 24px;
word-wrap: break-word;
padding: 13px 22px 38px 22px;
}
.wrapper-call__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 20px;
}
.call_colums_button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.call_colums_button a {
margin: 0 20px 0 20px;
width: 278px;
height: 60px;
background: #8DD83D;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 16px;
line-height: 21px;
color: #fff;
border-radius: 3px;
margin: 0 0 25px 0 ;
}