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

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

Example 2: Responsive background

Deep structure

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

Full-stack developer - react.js, node.js, serverless. @machnicki

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store