We’ve spent the final two articles on this three-part sequence taking part in with gradients to make actually neat picture decorations utilizing nothing however the <img> aspect. On this third and closing piece, we’re going to discover extra strategies utilizing the CSS define property. Which may sound odd as a result of we usually use define to attract a easy line round a component — sorta like border however it might probably solely draw all 4 sides directly and isn’t a part of the Field Mannequin.
We are able to do extra with it, although, and that’s what I need to experiment with on this article.
Fancy Picture Decorations sequence
Let’s begin with our first instance — an overlay that disappears on hover with a cool animation:
We might accomplish this by including an additional aspect over the picture, however that’s what we’re difficult ourselves not to do on this sequence. As a substitute, we are able to attain for the CSS define property and leverage that it might probably have a unfavourable offset and is ready to overlap its aspect.
img {
--s: 250px; /* the scale of the picture */
--b: 8px; /* the border thickness*/
--g: 14px; /* the hole */
--c: #4ECDC4;
width: var(--s);
aspect-ratio: 1;
define: calc(var(--s) / 2) stable #0009;
outline-offset: calc(var(--s) / -2);
cursor: pointer;
transition: 0.3s;
}
img:hover {
define: var(--b) stable var(--c);
outline-offset: var(--g);
}The trick is to create an define that’s as thick as half the picture measurement, then offset it by half the picture measurement with a unfavourable worth. Add in some semi-transparency with the colour and we’ve got our overlay!
The remainder is what occurs on :hover. We replace the define and the transition between each outlines creates the cool hover impact. The identical approach may also be used to create a fading impact the place we don’t transfer the define however make it clear.
As a substitute of utilizing half the picture measurement on this one, I’m utilizing a really huge define thickness worth (100vmax) whereas making use of a CSS masks. With this, there’s not a have to know the picture measurement — it trick works in any respect sizes!
Chances are you’ll face points utilizing 100vmax as an enormous worth in Safari. If it’s the case, take into account the earlier trick the place you substitute the 100vmax with half the picture measurement.
We are able to take issues even additional! For instance, as a substitute of merely clipping the additional define, we are able to create shapes and apply a flowery reveal animation.
Cool proper? The define is what creates the yellow overlay. The clip-path clips the additional define to get the star form. Then, on hover, we make the colour clear.
Oh, you need hearts as a substitute? We are able to actually do this!
Think about all of the potential mixtures we are able to create. All we’ve got to do is to attract a form with a CSS masks and/or clip-path and mix it with the define trick. One answer, infinite prospects!
And, sure, we are able to positively animate this as effectively. Let’s not neglect that clip-path is animatable and masks depends on gradients — one thing we lined in tremendous nice element within the first two articles of this sequence.
I do know, the animation is a bit glitchy. That is extra of a demo as an instance the thought slightly than the “closing product” for use in a manufacturing web site. We’d wanna optimize issues for a extra pure transition.
Here’s a demo that makes use of masks as a substitute. It’s the one I teased you with on the finish of the final article:
Do you know that the define property was able to a lot awesomeness? Add it to your toolbox for fancy picture decorations!
Mix all of the issues!
Now that we’ve got discovered many tips utilizing gradients, masks, clipping, and description, it’s time for the grand finale. Let’s cap off this sequence by mix all that we’ve got discovered the previous few weeks to showcase not solely the strategies, however reveal simply how versatile and modular these approaches are.
For those who have been seeing these demos for the primary time, you may assume that there’s a bunch of additional divs wrappers and pseudo-elements getting used to drag them off. However every part is occurring instantly on the <img> aspect. It’s the one selector we have to get these superior shapes and results!
Wrapping up
Properly, geez, thanks for hanging out with me on this three-part sequence the previous few weeks. We explored a slew of various strategies that flip easy photos into one thing eye-catching and interactive. Will you employ every part we lined? Actually not! However my hope is that this has been train so that you can dig into superior makes use of of CSS options, like gradients, masks, clip-path, and define.
And we did every part with only one <img> aspect! No additional div wrappers and pseudo-elements. Positive, it’s a constraint we placed on ourselves, but it surely additionally pushed us to discover CSS and attempt to discover modern options to frequent use instances. So, earlier than pumping additional markup into your HTML, take into consideration whether or not CSS is already able to dealing with the duty.
