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> ingredient. On this third and remaining piece, we’re going to discover extra methods utilizing the CSS define property. Which may sound odd as a result of we typically use define to attract a easy line round a component — sorta like border however it may well solely draw all 4 sides without delay and isn’t a part of the Field Mannequin.
We will 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 ingredient 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 may well have a unfavorable offset and is ready to overlap its ingredient.
img {
--s: 250px; /* the dimensions 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 unfavorable worth. Add in some semi-transparency with the colour and we’ve our overlay!
The remaining is what occurs on :hover. We replace the define and the transition between each outlines creates the cool hover impact. The identical method will 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 massive define thickness worth (100vmax) whereas making use of a CSS masks. With this, there’s now not a have to know the picture measurement — it trick works in any respect sizes!
You might face points utilizing 100vmax as an enormous worth in Safari. If it’s the case, take into account the earlier trick the place you change the 100vmax with half the picture measurement.
We will take issues even additional! For instance, as a substitute of merely clipping the additional define, we are able to create shapes and apply a elaborate 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 will actually try this!
Think about all of the doable mixtures we are able to create. All we’ve 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 properly. Let’s not overlook 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 example the thought slightly than the “remaining product” for use in a manufacturing website. 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 realized many methods 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 realized the previous few weeks to showcase not solely the methods, however reveal simply how versatile and modular these approaches are.
In case you had 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 the whole lot is occurring immediately on the <img> ingredient. It’s the one selector we have to get these superior shapes and results!
Wrapping up
Effectively, geez, thanks for hanging out with me on this three-part sequence the previous few weeks. We explored a slew of various methods that flip easy pictures into one thing eye-catching and interactive. Will you employ the whole lot we lined? Actually not! However my hope is that this has been a great train so that you can dig into superior makes use of of CSS options, like gradients, masks, clip-path, and define.
And we did the whole lot with only one <img> ingredient! No additional div wrappers and pseudo-elements. Positive, it’s a constraint we placed on ourselves, however it additionally pushed us to discover CSS and attempt to discover modern options to widespread use circumstances. So, earlier than pumping additional markup into your HTML, take into consideration whether or not CSS is already able to dealing with the duty.
