figure {
    position: relative;
    display: inline-block;
}
figure img {
    display: block;
}
.rollover-img {
    transition: opacity 0.2s ease-in-out;
}

/* Effects remain same as before, e.g.: */
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.fade-in { animation: fade-in 0.6s ease-in-out; }

/* Blur */
@keyframes blur {
    from { filter: blur(8px); opacity: 0; }
    to   { filter: blur(0); opacity: 1; }
}
.blur { animation: blur 0.6s ease-in-out; }

/* Grayscale */
@keyframes grayscale {
    from { filter: grayscale(100%); opacity: 0; }
    to   { filter: grayscale(0%); opacity: 1; }
}
.grayscale { animation: grayscale 0.6s ease-in-out; }

/* Rotate */
@keyframes rotate {
    from { transform: rotate(-180deg); opacity: 0; }
    to   { transform: rotate(0); opacity: 1; }
}
.rotate { animation: rotate 0.6s ease-in-out; }

/* Slides */
@keyframes slide-left {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.slide-left { animation: slide-left 0.6s ease-in-out; }

@keyframes slide-right {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.slide-right { animation: slide-right 0.6s ease-in-out; }

@keyframes slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.slide-up { animation: slide-up 0.6s ease-in-out; }

@keyframes slide-down {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.slide-down { animation: slide-down 0.6s ease-in-out; }

/* Zooms */
@keyframes zoom-in {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.zoom-in { animation: zoom-in 0.6s ease-in-out; }

@keyframes zoom-out {
    from { transform: scale(1.5); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.zoom-out { animation: zoom-out 0.6s ease-in-out; }