MMM-RandomPhoto.css

:root {
    --randomphoto-blur-value: 0px;
}

#randomPhoto img {
    opacity: 0;
    position: absolute;;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#randomPhoto img.grayscale {
    filter: grayscale(100%);
}

#randomPhoto img.blur {
    filter: blur(var(--randomphoto-blur-value));
}

#randomPhotoIcon {
    position: absolute;
}

#randomPhotoIcon.rpitop {
    top: 5px;
}

#randomPhotoIcon.rpibottom {
    bottom: 5px;
}

#randomPhotoIcon.rpiright {
    right: 10px;
}

#randomPhotoIcon.rpileft {
    left: 10px;
}

#randomPhotoIcon i {
    opacity: 1;
}

#randomPhotoIcon i.rpihidden {
    opacity: 0;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeInAndOut {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}