How to create an image overlay title on hover with CSS?

CSS Web Development Front End Technology

Following is the code to create an image overlay title on hover using CSS −

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.card-container {
   position: relative;
   width: 50%;
}
.image {
   display: block;
   width: 100%;
   height: auto;
}
.overlay {
   position: absolute;
   bottom: 0;
   background: rgba(48, 9, 155, 0.5);
   width: 78%;
   transition: .5s ease;
   opacity:0;
   color: rgb(251, 255, 0);
   font-size: 25px;
   font-weight: bolder;
   padding: 20px;
   text-align: center;
}
.card-container:hover .overlay {
   opacity: 1;
}
</style>
</head>
<body>
<h2>Image Overlay Title Example</h2>
<div class="card-container">
<img src="https://i.picsum.photos/id/237/536/354.jpg" >
<div class="overlay">Dog</div>
</div>
</body>
</html>

Output

The above code will produce the following output −

On hovering over the image the caption will be shown as bottom −

AmitDiwan

Published on 06-Apr-2020 12:29:14

Previous Page Print Page