Tutorial on CSS Background Image Hovers & Transitions

In CSS, background-image(s) are used everywhere, but not many people animate or transition them. I will cover a few cool ways you can start using them with hover effects.

We will cover:

Using background-image, position, size, repeat,
Using background-blend-mode,
Creating transitions for the blend mode,
Using background-size and animating it on hover,
Animating a background image with gifs,
Combine all the elements we learnt (up above)

The end result should look something like this:

// SASS Syntax
.bg-transition {
    .img {
        background-color:rgba(red,0.75);
        background-image:url(./youtube-a.jpg);
        background-size:125%;
        background-repeat:no-repeat;
        background-position: center;
        transition: 2s ease all;
        background-blend-mode:multiply;
    }
    &:hover {
        .img {
            background-color:rgba(red,0);
            background-size:100%;
            background-image:url(./youtube-a.gif);
        }
    }
}

Want to see more:

I will try to post new great content every day. Here are the latest items:

Follow and support me:

Adrian @ Youtube
Adrian @ Patreon
Adrian @ Twitter

PS. Does anyone know how to add colors to 'pre' code on dev.to?