.gif-container img {
    border-radius: 8px;
}

.gif-container.ripple::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 8px; /* Match the image's border-radius */
    animation: ripple-animation 1s ease-out forwards;
}

@keyframes ripple-animation {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}