CODEWITHSUNDEEP
htmlcsscss-transitions
Codecraker
Codecraker

Reputation: 337

how to zoom an image within the frame

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;
  }
}
<div class="container">

  <div class="col-md-12">
    <div class="row">
      <div class="gal">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
      </div>
    </div>
  </div>
</div>

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

Upvotes: 3

Views: 2332

Answers (2)

Pedram
Pedram

Reputation: 16575

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.

Upvotes: 3

Niek Nijland
Niek Nijland

Reputation: 772

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;
  }
}
<div class="container">

  <div class="col-md-12">
    <div class="row">
      <ul class="gal">
        <li class="image-container">
          <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        </li>
        <li class="image-container">
          <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
        </li>
        <li class="image-container">
          <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        </li>
        <li class="image-container">
          <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
        </li>
        <li class="image-container">
          <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        </li>
        <li class="image-container">
          <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions