Opacity + Scale For Quick & Dirty Animations

Recently I was working through some old projects and I came into a situation where I had to animate an expanding floater-ish background hover effect for a card component. If you ever worked with CSS before you’ll know that it isn’t possible to transition between width and heights of value “auto” which was the tricky aspect in regards to this problem.

The inability to animate to auto is a well known CSS issue so there are many solutions such as using a wrapper with grid. However, for this specific effect I needed to expand the card radially in a way that aligned the main content with the rest of the containers in the UI layout which is where I leverage opacity and scale properties.

The code snippet below is a simple example of how to achieve this effect:

<div class="wrapper">
    <div class="background">
    </div>
    <div class="content">
        Hover Over Me!
    </div>
</div>

.wrapper {
    width: 120px;
    height: 120px;
    position: relative;
    padding: 16px;
}
.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: blue;
    border-radius: 6px;
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.3s ease-in-out;
    z-index: -1;
}
.wrapper:hover .background {
    transform: scale(1.1);
    opacity: 1;
}
.content {
    border-radius: 6px;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

It’s always interesting seeing how powerful and simple CSS can be. Instead of writing an entire JavaScript function that probably takes a shit ton of lines to create such an effect, you can instead, leverage 2 simple CSS properties! It’s not just opacity and scale properties that you can combine, but there’s also really cool hacks you can do with clip-path or linear gradient to create very interesting visual patterns as well. So I guess the lesson here is don’t sleep on simple CSS features.

Thanks for reading. Cya 👋.