We’ve spent the final two articles on this three-part collection taking part in with gradients to make actually neat picture decorations utilizing nothing however the <img> factor. 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 usually use define to attract a easy line round a component — sorta like border however it could 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 wish to experiment with on this article.
Fancy Picture Decorations collection
Let’s begin with our first instance — an overlay that disappears on hover with a cool animation:
We may accomplish this by including an additional factor over the picture, however that’s what we’re difficult ourselves not to do on this collection. As a substitute, we will attain for the CSS define property and leverage that it could have a adverse offset and is ready to overlap its factor.
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) strong #0009;
outline-offset: calc(var(--s) / -2);
cursor: pointer;
transition: 0.3s;
}
img:hover {
define: var(--b) strong 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 adverse worth. Add in some semi-transparency with the colour and now we have 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 large define thickness worth (100vmax) whereas making use of a CSS masks. With this, there’s now not a must know the picture measurement — it trick works in any respect sizes!
It’s possible you’ll face points utilizing 100vmax as a giant worth in Safari. If it’s the case, contemplate 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 an alternative of merely clipping the additional define, we will 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 an alternative? We are able to definitely do this!
Think about all of the doable combos we will create. All now we have to do is to attract a form with a CSS masks and/or clip-path and mix it with the define trick. One resolution, infinite potentialities!
And, sure, we will undoubtedly animate this as effectively. Let’s not neglect that clip-path is animatable and masks depends on gradients — one thing we coated in tremendous nice element within the first two articles of this collection.
I do know, the animation is a bit glitchy. That is extra of a demo as an example the concept moderately than the “remaining 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 an alternative. 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 now we have realized many methods utilizing gradients, masks, clipping, and description, it’s time for the grand finale. Let’s cap off this collection by mix all that now we have realized the previous few weeks to showcase not solely the methods, however show simply how versatile and modular these approaches are.
If you happen to have been seeing these demos for the primary time, you would possibly assume that there’s a bunch of additional divs wrappers and pseudo-elements getting used to tug them off. However every thing is occurring straight on the <img> factor. 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 collection the previous few weeks. We explored a slew of various methods that flip easy pictures into one thing eye-catching and interactive. Will you utilize every thing we coated? Definitely not! However my hope is that this has been a superb 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 thing with only one <img> factor! 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 revolutionary options to frequent 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.
