Làm cách nào để tạo hiệu ứng trượt di chuột qua lớp phủ hình ảnh với CSS?

Sau đây là mã để tạo hiệu ứng trượt di chuột qua lớp phủ hình ảnh bằng CSS -

Ví dụ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card-container {
   position: relative;
   width: 50%;
}
img {
   display: block;
   width: 100%;
}
.overlay {
   position: absolute;
   bottom: 100%;
   background-color: rgb(55, 74, 179);
   overflow: hidden;
   width: 100%;
   height: 0;
   transition: .5s ease-in-out;
}
.card-container:hover .overlay {
   bottom: 0;
   height: 100%;
}
.caption {
   color: white;
   font-size: 30px;
   position: absolute;
   top: 50%;
   left: 50%;
   text-align: center;
}
</style>
</head>
<body>
<h1>Image Overlay Slide Example</h1>
<div class="card-container">
<img src="https://i.picsum.photos/id/237/536/354.jpg">
<div class="overlay">
<div class="caption">Dog</div>
</div>
</div>
</body>
</html>