CODEWITHSUNDEEP
htmlcss
John.P
John.P

Reputation: 77

Overflow: Hidden isn't recognized

I would like to zoom in on a picture when I hover over it. But instead, it scales up the enitre picture when I hover over it even though I used overflow: hidden.

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;

}

Demo: https://jsfiddle.net/7y5cgsba/

Upvotes: 0

Views: 29

Answers (1)

Tan Dat
Tan Dat

Reputation: 3117

You should scale the .image-parent:hover img not the entire .image-parent when hover. 

.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;
}

Upvotes: 2

Related Questions