transition css top and bottom - html

Question

How can I make such animation ?
(https://i.stack.imgur.com/NTWjH.png)
please check link below
https://preview.themeforest.net/item/shopify-outstock-clean-minimal-drag-drop/full_screen_preview/21041667?_ga=2.52492833.847676305.1666954417-2031082058.1666954417
.wrap-img {
transition: all 200ms ease 0s;
-webkit-transition: all 200ms ease 0s;
-moz-transition: all 200ms ease 0s;
overflow: hidden;
margin: 0px auto;
position: relative;
background: #fff;
padding: 15px;
}

Answer 1

One option would be this:
.box {
/* Required for the position: absolute property of the overlay. */
position: relative;
}
/* Scroll up and down effect */
.scrolling {
background-size: cover !important;
width: 285px;
min-height: 500px;
border: 15px solid #fff; /* Border is white */
cursor: pointer;
transition: background-position 1.5s ease-out 0.5s
}
.scroll {
background: url("https://velatheme.com/demo/outstock/images/cosmetic2.jpg");
background-position: top center;
}
.scroll_top:hover {
background-position: bottom center !important;
transition: background-position 2s linear 0s;
}
/* Background separating the image and the button */
.overlay {
position: absolute;
display: flex;
justify-content: center;
align-items:center;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.4);
}
.box:hover .overlay {
opacity: 1;
}
/* Button */
button {
display: none;
}
.box:hover button {
display: inline-block;
height: 48px;
width: 158px;
border: 4px solid #fff;
text-align: center;
line-height: 30px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
color: #333;
}
.box button:hover {
display: inline-block;
color: #fff;
background: #333;
cursor: pointer
}
<div class="box scrolling scroll scroll_top">
<div class="overlay">
<button>VIEW DEMO</button>
</div>
</div>
To do the opposite effect, you would first have to change the classes to scroll_bottom and it would just change:
In .scroll :
background-position: bottom center;
And in .scroll_top:hover (In this case it would be .scroll_bottom:hover):
background-position: top center !important;