Scale-out image reveal: CSS Hack

We recently had a client who requested the images load in with a scale in effect while sitting inside a cropped box.

Here is the codepen. Click Rerun to reset the effect.

See the Pen Scale In Image Reveal by Jamie (@studiotwofold) on CodePen.

The HTML:

<div class="container">
    <img class="image" alt="" src="https://picsum.photos/300/300" width="300" height="300">
</div>
<div class="container">
    <img class="image" alt="" src="https://picsum.photos/300/300" width="300" height="300">
</div>
<div class="container">
    <img class="image" alt="" src="https://picsum.photos/300/300" width="300" height="300">
</div>

The CSS:

.container {
  width: 300px;
  height: 300px;
  margin: 50px auto 100vh auto;
  overflow: hidden;
  /* border: 2px solid #ff0000; */
}


.image {
  width: 100%;
  background: #ffffff;
  object-fit: contain;
  opacity: 0;
}

.animate-on {
  /*z-index: -1;*/
  animation: scale-in-reveal 5s cubic-bezier(.23,1,.32,1) 0s 1 normal forwards;
}

@keyframes scale-in-reveal {
    0% { transform: scale(1.3, 1.3); opacity: 0; }
    100% { transform: scale(1, 1); opacity: 1; }
}

Edit: 2022-03-25
I just added the javascript listener, so it only plays the animation when visible in the viewport.

References:

Leave a Reply

Your email address will not be published.