body { font-family: Arial, sans-serif; } .hover-container { position: relative; width: 300px; /* Set the width of the container */ height: 200px; /* Set the height of the container */ overflow: hidden; } .hover-image { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; } .hover-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; text-align: center; opacity: 0; transition: opacity 0.3s ease; background-color: rgba(0, 0, 0, 0.5); /* Optional: Background color for better text readability */ padding: 10px; border-radius: 5px; } .hover-container:hover .hover-image { opacity: 0; } .hover-container:hover .hover-text { opacity: 1; }