Hover zoom background effect by Sass

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.

Class which cares hover-scaling effect

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.

Basic implementation

In this sample you will find, how to use presented class in very simple DOM structure.

Example 1: Simple implementation

It’s very important to add position: relative; CSS property to the parent element of .zoom-background class.

It’s responsive

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.

Example 2: Responsive background

Deep structure

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.

Example 3: Zoom effect — hover on container

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).