CSS Background Image 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:

• Full Tutorial on how to use SASS to improve your CSS
• 4 Simple CSS Hover Transitions for your Elements Background
• How to implement Dark Mode with CSS new media call: prefers-color-scheme
• Creating a Mobile Design and Developing it

Follow and support me:

Adrian @ Youtube
Adrian @ Patreon
Adrian @ Twitter

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

Comments

[Thomas Bnt]

Hello Adrian,
Maybe is late but always useful.

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

For you code uses

.myclass { color: red }