AKor AKor - 1 year ago 79
HTML Question

Zooming 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 into 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 */

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.

Answer Source

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">
      <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 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" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download