<div class="screen"><img src="https://picsum.photos/300/300" width="300" height="300"></div>
<div class="screen"><img src="https://picsum.photos/200/300" width="300" height="300"></div>

body {
  background: #666;
}
.screen {
  width: 300px;
  height: 150px; /* half image height*/
  position: relative;
  overflow: hidden;
  border: 10px solid #000;
  border-radius: 10px 10px 0 0;
  margin: 20px;
  background: #fff;
  cursor: pointer;
}
.screen img {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 1s ease-in-out 0.5s;
}
.screen:hover img {
  transform: translateY(-50%);
}