Fancy Image Decorations: Outlines and Complex Animations | CSS-Tricks

• Read original article here

We’ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the element. In this third and final piece, we are going to explore more techniques using the CSS property. That might sound odd because we generally use to draw a simple line around an element — sorta like but it can only draw all four sides at once and is not part of the Box Model.

We can do more with it, though, and that’s what I want to experiment with in this article.

Let’s start with our first example — an overlay that disappears on hover with a cool animation:

We could accomplish this by adding an extra element over the image, but that’s what we’re challenging ourselves not to do in this series. Instead, we can reach for the CSS property and leverage that it can have a negative offset and is able to overlap its element.

The trick is to create an that’s as thick as half the image size, then offset it by half the image size with a negative value. Add in some semi-transparency with the color and we have our overlay!

The rest is what happens on . We update the and the transition between both outlines creates the cool hover effect. The same technique can also be used to create a fading effect where we don’t move the but make it transparent.

Instead of using half the image size in this one, I am using a very big thickness value () while applying a CSS mask. With this, there’s no longer a need to know the image size — it trick works at all sizes!

You may face issues using as a big value in Safari. If it’s the case, consider the previous trick where you replace the with half the image size.

We can take things even further! For example, instead of simply clipping the extra , we can create shapes and apply a fancy reveal animation.

Cool right? The is what creates the yellow overlay. The clips the extra to get the star shape. Then, on hover, we make the color transparent.

Oh, you want hearts instead? We can certainly do that!

Imagine all the possible combinations we can create. All we have to do is to draw a shape with a CSS mask and/or and combine it with the trick. One solution, infinite possibilities!

And, yes, we can definitely animate this as well. Let’s not forget that is animatable and relies on gradients — something we covered in super great detail in the first two articles of this series.

I know, the animation is a bit glitchy. This is more of a demo to illustrate the idea rather than the “final product” to be used in a production site. We’d wanna optimize things for a more natural transition.

Here is a demo that uses instead. It’s the one I teased you with at the end of the last article:

Did you know that the property was capable of so much awesomeness? Add it to your toolbox for fancy image decorations!

Now that we have learned many tricks using gradients, masks, clipping, and outline, it’s time for the grand finale. Let’s cap off this series by combine all that we have learned the past few weeks to showcase not only the techniques, but demonstrate just how flexible and modular these approaches are.

If you were seeing these demos for the first time, you might assume that there’s a bunch of extra divs wrappers and pseudo-elements being used to pull them off. But everything is happening directly on the element. It’s the only selector we need to get these advanced shapes and effects!

Well, geez, thanks for hanging out with me in this three-part series the past few weeks. We explored a slew of different techniques that turn simple images into something eye-catching and interactive. Will you use everything we covered? Certainly not! But my hope is that this has been a good exercise for you to dig into advanced uses of CSS features, like gradients, , , and .

And we did everything with just one element! No extra div wrappers and pseudo-elements. Sure, it’s a constraint we put on ourselves, but it also pushed us to explore CSS and try to find innovative solutions to common use cases. So, before pumping extra markup into your HTML, think about whether CSS is already capable of handling the task.