The final time we met, I demonstrated how newer CSS options — notably trigonometric features — could be leveraged to perform a “pop-out” hover impact. That is what we made collectively:
Even the rotation is feasible with clip-path polygon():
We will outline the form with three parameters:
The variety of spikes (we’ll name this N);
The radius of the large circle, illustrated in inexperienced (we’ll name this R);
The radius of the small circle illustrated in blue (this will likely be R – d).
For the sake of simplicity, I’ll outline d as a proportion of R — R – (R * p) — the place p is a quantity within the vary [0 1]. So, in the long run, we’re left with three variables, N, R, and p.
In the event you look intently on the form, you possibly can see it’s a collection of triangular shapes which might be lower out of a big round form. That’s precisely how we’re going to sort out this problem. We will create triangles with conic-gradient after which lower them out of the circle with the mask-composite property. Getting a circle is fairly simple utilizing border-radius: 50%.
The variety of conic gradients is the same as the variety of triangles within the sample. Every gradient can use practically the identical configuration, the place the distinction between them is how they’re rotated. Which means the gradient’s code will look one thing like this:
conic-gradient(from -1*angle at {place}, #000 2*angle, #0000 0);
Fortunately, the place we calculated within the final article is comparable sufficient to the purpose that we are able to depend on it right here as properly:
50% + (50% * (1 – p)) * cos(360deg * i/N)
50% + (50% * (1 – p)) * sin(360deg * i/N)
Once more, N is the variety of triangles, and p controls the radius of the small circle. R is the same as 50%, so the place can be expressed like this:
R + (R * (1 – p)) * cos(360deg * i/N)
R + (R * (1 – p)) * sin(360deg * i/N)
We have to resort to some geometry to find out the worth of angle. I’ll skip the boring math for the sake of brevity, however please be at liberty to go away a remark in case you’re within the formulation, and I will likely be glad to provide you extra particulars.
angle = atan(sin(180deg/N)/(p – 1 + cos(180deg/N)))
Now, we have to loop by all of that as many occasions as there are triangles within the sample. So, we are going to do what we did within the final article and change from vanilla CSS to Sass so we are able to benefit from Sass loops.
The next snippet selects the one aspect within the HTML, <img>, and loops by the conic gradients for as many triangles we set ($n: 9). The output of that loop is saved as one other variable, $m, that’s utilized to the CSS masks.
img {
–r: 160px; /* radius */
–p: 0.25; /* p.c */
–angle: atan(sin(180deg/#{$n}) / (var(–p) – 1 + cos(180deg/#{$n})));
width: calc(2 * var(–r));
aspect-ratio: 1;
border-radius: 50%;
$m: ();
@for $i from 0 by ($n – 1) {
$m: append($m,
conic-gradient(
from calc(90deg + 360deg * #{$i/$n} – var(–angle)) at
calc(50% + (50% * (1 – var(–p))) v cos(360deg * #{$i/$n}))
calc(50% + (50% * (1 – var(–p))) * sin(360deg * #{$i/$n})),
#000 calc(2*var(–angle)), #0000 0),
comma
);
}
masks: $m;
}
Right here’s the results of all that work:
Subsequent, we add the dimensions impact to the picture’s :hover state:
img {
–f: 1.2; /* the dimensions issue */
/* and so on */
}
img:hover {
scale: var(–f);
}
To ensure each starburst shapes have an identical sizes (within the non-hover and hover states), –i wants a formulation primarily based on the dimensions issue:
–f: 1.2; /* the dimensions issue */
/* and so on */
}
img:hover {
–i: calc(var(–r) * (1 – var(–p)) * (var(–f) – 1) / var(–f));
scale: var(–f);
}
And, now, we’re lastly completed.
See the Pen Fancy Pop Out hover impact! by Temani Afif.
One other Instance
Let’s attempt one other fancy impact the place the avatar is hidden, and on hover, it slides from the underside to “come out” whereas, on the identical time, we replace the starburst form.
See the Pen Fancy Pop Out Reveal hover impact! by Temani Afif.
Cool, proper? We’re nonetheless utilizing just one <img> aspect within the markup, however this time, I launched the sliding impact. This will likely be your homework! I’ll allow you to dissect the code to grasp what I’ve modified.
Trace: A CSS Tip the place I’m utilizing the sliding impact.
Wrapping Up
I hope you take pleasure in having a bit of further follow on the methods we utilized in the earlier article to create this “pop-out” hover impact. If it appears like I went a bit of quicker this time round, it’s as a result of I did. Somewhat than spending time explaining the identical ideas and methods, I used to be extra involved with demonstrating them in a barely totally different context. So, we realized a number of new concepts for working with gradients in CSS masks and background pictures!
Regardless of the complexity of every thing we coated, there may be nothing that requires you to grasp every thing directly and even straight away. Take the time to undergo this and the earlier article step-by-step till you grasp the elements which might be hardest so that you can grok. In all honesty, you’ll most likely by no means end up in a state of affairs the place it’s worthwhile to use all these tips collectively. This was a fairly area of interest train. However it supplies us with an excuse to individually examine the methods that may show you how to clear up some complicated issues in CSS with out resorting to scripting or further HTML.
As for the mathematics and the formulation, you don’t have to precisely perceive them. The objective is to exhibit that we could be as correct as we would like in relation to calculating values and nonetheless develop one thing that’s extremely maintainable with only some variables. With out trigonometric features and calc() in CSS, we might be obliged to manually set all the values as soon as we have to replace one thing, which might be extremely tedious.
I’ll shut this little collection with a final demo. Get pleasure from!
See the Pen Come out hover impact that includes Kevin and Alvaro by Temani Afif.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!