CODEWITHSUNDEEP
htmlcssimage
AKor
AKor

Reputation: 8882

Zooming in an image without changing container's size

so I have a grid of images and I'm trying to make an effect where a mouse hover zooms in the image but without changing the dimensions of the container of the image.

My current code looks like this:

img.thumb-image.loaded {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

img.thumb-image.loaded:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
    transform:scale(1.25);
}

But it makes the entire image larger by 1.25. Is there a way to constrain the size to remain the same but provide the same scale functionality? I'm open to using JS if need be.

Upvotes: 0

Views: 2854

Answers (1)

trungvose
trungvose

Reputation: 20034

Agree with @Marat comment, but overflow: hidden should be added to the parent of the image.

You can check my pen here to have a better understanding. Let me know if there are any comments.

.wrapper {
  max-width: 80em;
  margin: 0 auto;
}
.wrapper li {
  display: inline-block;
  overflow: hidden;
  max-height: 200px;
}
.wrapper img {
  max-width: 200px;
}
.wrapper .overlay-container {
  display: block;
  position: relative;
}
.wrapper .overlay-container::before {
  content: attr(data-overlay-text);
  font: 1em/1.5em 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: absolute;
  z-index: 1;
  /*On top of parent*/
  top: 40%;
  width: 100%;
  text-align: center;
  color: #fff;
  background: rgba(128, 128, 128, 0.8);
  opacity: 0;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.wrapper .overlay-container:hover::before {
  opacity: 1;
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}
.wrapper .overlay-container .overlay-img {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.wrapper .overlay-container:hover .overlay-img {
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
/*Original source: http://codepen.io/trungk18/pen/MepYXj*/
<div class="wrapper">
  <ul class="img-grid">
    <li>
      <a href="#" class="overlay-container" data-overlay-text="Beatles">
        <img src="http://trungk18.github.io/img/image-grid/img-beatles.jpg" alt="Image capture goes here 01" class="overlay-img" />
      </a>
    </li>
    <li>
      <a href="#" class="overlay-container" data-overlay-text="Bonsai">
        <img src="http://trungk18.github.io/img/image-grid/img-bonsai.jpg" alt="Image capture goes here 02" class="overlay-img" />
      </a>
    </li>  
  </ul>
</div>

Upvotes: 2

Related Questions