DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›