DEV Community

Cover image for Tutorial on CSS Background Image Hovers & Transitions
Adrian Twarog
Adrian Twarog

Posted on

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:
Example 1

// 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?

Top comments (1)

Collapse
 
thomasbnt profile image
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

Code block on dev.to example

.myclass { color: red }
Enter fullscreen mode Exit fullscreen mode