How to create image overlay icon effect on hover with CSS?

CSS Web Development Front End Technology

Following is the code to produce image overlay icon effect on hover using CSS -

Example

<!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>