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: