What banner effect is this on this dev website?

First of all, ditch CSS grid. Frameworks are useless, and will always ended up being being more effort to adapt to your design than it's worth. Just build what you need as you need it, and learn to organize things.

Second, ditch transition and create a function that adjust the image on mouse hover. You can pre-load your all three images on top of each other with the latter two's opacity set to 0. Then run a counter which fades both images in. Here's some pseudo-code.

if (on_mouse_enter)
    while (image2.style.opacity < 1.0)
        image2.style.opacity+= (0.01 * speed)

    while (image3.style.opacity < 1.0) { // repeat
        ...

if (on_mouse_exit)
    while (image3.style.opacity > 0)
        // same as above in reverse
/r/webdev Thread