ZoomIn on hover

by Michael Danilov

HTML

<div class="row -img">
  <img class="img" src="http://placebear.com/300/300" alt="">
  <img class="img" src="http://placebear.com/300/300" alt="">
</div>

<div class="row -div">
  <div class="img">
    <img src="http://placebear.com/300/300" alt="">
  </div>
  <div class="img">
    <img src="http://placebear.com/300/300" alt="">
  </div>
</div>

SCSS

$size: 200px;
$hoverSize: 300px;

.img {
  float: left;
  height: $size;
  margin: 5px;
  width: $size;
}

.row {
  margin: 60px;
  position: relative;

  &:after {
    content: "";
    display: table;
    clear: both;
  }

  &.-img {
    margin-bottom: 20px;

    .img {
      &:hover {
        height: $hoverSize;
        width: $hoverSize;
      }
    }
  }

  &.-div {
    position: relative
    z-index: 1;

    .img {
      position: relative;

      &:hover {
        img {
          margin-left: ($hoverSize - $size) / 2 * -1;
          margin-top: ($hoverSize - $size) / 2 * -1;
          height: $hoverSize;
          width: $hoverSize;
          z-index: 2;
        }
      }

      img {
        position: absolute;
        height: $size;
        width: $size;
      }
    }
  }
}