What I really like in Sass and in similar CSS preprocessors is possibility to keep common reusable classes in one place and after extend or include them. The goal of this post is to show you, how easy is to create fancy background zoom effect on hover state.
As you see in code above zoom effect is done by CSS3 transform and transition properties. Hover state is kept in separate class, because in more complex DOM structure we might want to trigger this class on hover state of parent container — will show you this in third example.
In this sample you will find, how to use presented class in very simple DOM structure.
It’s very important to add position: relative; CSS property to the parent element of .zoom-background class.
Thanks to background-size: cover; property our image is always very nice scaled. You can change dimension of the container, and effect will be still satisfied.
Sometimes you might want to have description under image and close whole structure into one link -> simple card element. Hover action on whole link element (so also on description) should trigger our zoom background effect.
Thanks to Sass and our .zoom-background-hover class we can do that very easy.
The most important part of the solution you can check here.
If you need some variants of our .zoom-background class, you should implement it as Sass mixin (to keep variables separately).