Recreating the Pop-Out Hover Effect Using Contemporary CSS (Part 2)

Arti...
Recreating the Pop-Out Hover Effect Using Contemporary CSS (Part 2)

Temani was a frequent contributor to CSS-Tricks, having written a significant number of articles despite not being a staff member. He has a passion for experimenting with CSS and pushing its boundaries. Learn more about Temani ↬

Receive weekly insights on front-end and UX, trusted by over 200,000 individuals.

In our previous meeting, I showcased how to utilize the latest CSS features, specifically trigonometric functions, to create a "pop-out" hover effect. Here's what we created together:

Check out the Pen Fancy Pop Out hover effect! by Temani Afif.

We're going to recreate the demo, but with a new shape. Instead of the rounded floral pattern for the frame from which the avatar emerges, we'll design a starburst pattern.

Check out the Pen Fancy Pop Out hover effect! by Temani Afif.

We'll be using the same principles to create this effect, so it's recommended to read the first part of this series before proceeding. This is a chance to apply what we've learned in a new setting. We'll continue to use CSS masks to "draw" the shape using gradients, trigonometric functions, and custom properties.

Join Smashing Workshops for front-end, design & UX, featuring practical takeaways, live sessions, video recordings, and a friendly Q&A. With Brad Frost, Stéph Walter, and many others.

Creating a starburst shape is relatively straightforward in CSS. This has been achieved for years using a mix of pseudo-elements with transforms. A modern method is to use the clip-path property to draw a polygon that forms the shape.

Alternatively, you can use my online generator to save time on drawing it yourself.

Rotation is also possible with clip-path polygon():

Check out the Pen Starburst rotating images by Temani Afif.

Sadly, none of these methods will be useful in this case. In the previous article, we learned that the top half of the image needs to overflow the frame for the "pop-out" effect to work. Therefore, we had to be creative and combine a mask for the frame's bottom half and a background for its top half.

This means we can't rely solely on a clip-path approach. Our solution will depend on a mask, as before, but the mask configuration will be slightly more complex as we'll be working with a conic-gradient and the mask-composite property to draw the shape. The mask-composite property is likely one you don't use often, so it'll be interesting to apply it in a practical example.

We can define the shape using three parameters:

For simplicity, I'll define d as a percentage of R — R - (R * p) — where p is a number between 0 and 1. So, we're left with three variables, N, R, and p.

If you examine the shape closely, you'll notice it's a series of triangular shapes cut out of a larger circular shape. That's exactly how we'll approach this challenge. We can create triangles with a conic-gradient and then cut them out of the circle using the mask-composite property. Creating a circle is straightforward using border-radius: 50%.

The number of conic gradients equals the number of triangles in the pattern. Each gradient can use almost the same configuration, with the only difference being their rotation. This means the gradient's code will look something like this:

Fortunately, the position we calculated in the previous article is similar enough that we can use it here as well:

Again, N is the number of triangles, and p controls the radius of the small circle. R is equal to 50%, so the position can also be expressed like this:

We'll need to use some geometry to dete...