how to zoom an image within the frame

Question

In my web page I've tired to make a grid type image gallery.I want on hover image should be zoomed within the frame.( Example: http://cad180.com/About )[on hover images are zoomed within the frame].

.gal {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
  display: block;
  overflow: hidden;
}

.zoom {
  cursor: pointer;
  transition: all .5s ease;
}

.zoom:hover {
  transform: scale(1.2, 1.2);
}

.gal img {
  width: 100%;
  padding: 7px 0;
}

@media (max-width: 500px) {
  .gal {
    -webkit-column-count: 1;
    /* Chrome, Safari, Opera */
    -moz-column-count: 1;
    /* Firefox */
    column-count: 1;
  }
}

Please help me doing this also the middle portion and right portion images are not zooming properly .Help me please .MY DEMO CODE

user_4540183 · Answer

Simply you need wrap your img element with a div and do overflow: hidden on it:

.grid {
    overflow: hidden;
}

JSFiddle

for your second problem you need to use backface-visibility: hidden; to fix it. read more about it here.

user_2247819 · Answer

Wrap your images in containers and add overflow: hidden; to the containers.

Also remove the padding from the img elements and style the spacing on the containers.

.gal {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
  display: block;
}

.image-container {
  overflow: hidden;
  margin: 14px 0;
}

.zoom {
  cursor: pointer;
  transition: all .5s ease;
}

.zoom:hover {
  transform: scale(1.2);
}

.gal img {
  width: 100%;
}

@media (max-width: 500px) {
  .gal {
    -webkit-column-count: 1;
    /* Chrome, Safari, Opera */
    -moz-column-count: 1;
    /* Firefox */
    column-count: 1;
  }
}

how to zoom an image within the frame

2 Answers