Переполнение: скрытый не распознан

Question

Я хотел бы увеличить изображение, когда наведу на него курсор. Но вместо этого он увеличивает масштаб изображения при наведении на него курсора, даже если я использовал переполнение: скрытое.

HTML

    <div class="gallery">
   <div class="image-parent">
        <div class="image fit">
                <a href="#"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" /></a>
        </div>
     </div>
  </div>

CSS

body{
    background:#D8DBDC;
}
    .image.fit {
            display: block;
            margin: 0 0 2rem 0;
            width: 100%;
      overflow: hidden;
        }
.image.fit img {
                width: 100%;
        overflow: hidden;
            }
      .imagine-parent {
        overflow: hidden;
      }
.image-parent:hover {
        -ms-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    overflow: hidden;
    }
  .gallery {
    width: 100%;
    margin: 2.5rem 2.5rem 2.5rem 2.5rem;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -moz-align-items: stretch;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;

}

Демо: https://jsfiddle.net/7y5cgsba/

Answer 1

Вы должны масштабировать .image-parent:hover img не все .image-parent при наведении курсора.

.image-parent:hover img {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    overflow: hidden;
}