Can the CSS transition be changed to allow for a sliding down effect with a blur effect? I am looking to change this CSS animation effect to match the gif image shown below. Is it achievable using JavaScript, CSS, or a combination of both? Any help in solving this problem would be greatly appreciated. Thank you in advance.
How can these image transitions be modified to resemble the movement in the gif image type?
body {
background-color: #222;
}
.screen {
background-image: url(https://41.media.tumblr.com/tumblr_lvv2z3bsYG1qz7u7yo1_1280.jpg);
height: 540px;
left: 50%;
overflow: hidden;
position: absolute;
top: 100px;
transform: translate(-50%);
width: 960px;
box-shadow: 0px 0px 40px #111;
}
.screen:hover .pic1 {
-webkit-filter: blur(20px);
filter: blur(20px);
transform: scale(1.1);
opacity: 0;
}
.screen:hover .pic2 {
-webkit-filter: blur(0px);
filter: blur(0px);
transform: scale(1);
opacity: 1;
}
.pic1 {
position: absolute;
z-index: 2;
transition: 0.4s;
transform-origin: 50%, 50%;
}
.pic2 {
-webkit-filter: blur(20px);
filter: blur(20px);
transform: scale(1.1);
opacity: 1;
transition: 0.4s;
}
.button {
text-align: center;
background-color: #aaa;
height: 50px;
width: 250px;
border-radius: 25px;
}
span {
font-size: 20px;
display: inline-block;
margin-top: 15px;
font-family: 'Helvetica';
font-weight: bold;
position: absolute;
}
<div class="screen">
<img class="pic1" src="https://41.media.tumblr.com/tumblr_m0u1feK1tA1r81skpo1_1280.jpg" alt="City" />
<img class="pic2" src="https://41.media.tumblr.com/tumblr_lvv2z3bsYG1qz7u7yo1_1280.jpg" alt="City" />
</div>