.image-container { position: relative; display: inline-block; } .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); /* Adjust the overlay color and transparency as needed */ text-align: center; padding: 10px; /* Adjust padding as needed */ visibility: hidden; opacity: 0; transition: opacity 0.3s; } .image-container:hover .overlay { visibility: visible; opacity: 1; } .hover-button { background-color: #4CAF50; /* Green, adjust as needed */ color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; /* Optional: Add rounded corners */ }
.png)