/* The container needs a relative position to anchor the absolute positioned overlay */
        .weatherimage-container {
            position: relative;
        }

        /* The overlay will cover the container, and we'll use flexbox to center the text */
        .weatherimage-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5; /* Hidden by default */
            transition: opacity 0.3s ease-in-out; /* Smooth fade transition */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* When hovering over the container, we change the overlay's opacity to make it visible */
        .weatherimage-container:hover .image-overlay {
            opacity: 1;
        }