.hover-image {
    position: absolute;
    width: 150px; /* Ajusta el tamaño según lo necesites */
    height: auto;
    pointer-events: none; /* Evita interferencias con el mouse */
    z-index: 10;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

@keyframes slide-in {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(10px);
        opacity: 0;
    }
}

#hover-image.visible {
    opacity: 1; /* Aparece */
    transform: translateX(0); /* Entra a la vista */
}

#hover-image.hidden {
    opacity: 0; /* Desaparece */
    transform: translateX(10px); /* Se mueve fuera de la vista */
}