.hover-container { position: relative; display: inline-block; overflow: hidden; width: 100%; max-width: 600px; /* You can adjust the size */ } .hover-container img { display: block; width: 100%; height: auto; } .hover-text { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); /* translucent black overlay */ color: white; padding: 1em; text-align: center; opacity: 0; transition: opacity 0.4s ease; } .hover-container:hover .hover-text { opacity: 1; }