.hover-overlay {
position: relative;
display: inline-block;
}
.hover-overlay img {
display: block;
width: 100%;
}
.hover-overlay::after {
content: "Your Overlay Text Here";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Dark overlay */
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.hover-overlay:hover::after {
opacity: 1;
}
