Почему картинка выходит за пределы своего блока при наведении. Нужно, чтобы картинка не вырезалась с помощью overflow: hidden
, а увеличивалась в своём блоке.
Пример кода:
.post {
flex: calc(50% - 20px);
margin-bottom: 20px;
border: 1px solid #ccc;
margin-left: 20px;
}
.post__img img {
width: 100%;
transition: all 1s ease-out;
}
.post__img img:hover {
transform: scale(1.1);
}
<article class="post">
<div class="post__img">
<img src="img/300x150-4.jpg" alt="">
</div>
</article>