Làm thế nào để tạo hiệu ứng biểu tượng lớp phủ hình ảnh khi di chuột bằng CSS?

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

Ví dụ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" 
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
*{
   box-sizing: border-box;
}
.card-container {
   display: inline-block;
   position: relative;
   width: 50%;
}
img {
   opacity: 1;
   display: block;
   width: 100%;
   transition: .5s ease;
   backface-visibility: hidden;
}
.hoverText {
   position: absolute;
   top:0;
   height: 100%;
   transition: .5s ease;
   opacity: 0;
   width: 100%;
   text-align: center;
}
.card-container:hover .hoverText {
   opacity: 1;
}
.caption {
   background-color: rgb(18, 53, 131);
   color: white;
   font-size: 30px;
   padding-top:30%;
   border-radius: 6px;
   height: 100%;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-weight: bolder;
}
</style>
</head>
<body>
<h1>Image Overlay Icon Example</h1>
<div class="card-container">
<img src="https://i.picsum.photos/id/237/536/354.jpg">
<div class="hoverText">
<div class="caption">
<i style="font-size:150px" class="fa fa-paw" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>