JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="test" class="box">
    <img src="https://picsum.photos/1200/700" alt="">
</div>
<button>fewf</button>

CSS

body {
    margin: 0;
}
.box {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    transform-origin: top;
    transition: 1s;
}
.box img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: 1s;
    transform-origin: bottom;
}
button {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
}
.box.active {
    transform: scaleY(0.2);
}
.box.active img {
    transform: scaleY(5) translate(0,100px);
}

JavaScript

$('button').click(function(){
	$('.box').toggleClass('active');
    var height = document.querySelector('#test').clientHeight;
    var scale = height / 200;
    alert(scale);
})