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?
Top comments (1)
Hello Adrian,
Maybe is late but always useful.
For you code uses