Background Scale Hover Effect with CSS Clip-path

A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path.
BackgroundScaleClip_featured

From our sponsor: Don't spend all day sending messages. Automatically reach out to fans based on how they behave.

Today I’d like to share a simple hover effect with you. It’s a recreation of the hover effect seen in the menu on the DDD Hotel website by Garden Eight. The idea is to scale down the background image and “fitting” it to a clip shape which contains the same background image. The shape is visible because the opacity of the background is a bit lower:

When I saw the effect on the DDD Hotel website, I wanted to try to do it using the clip-path property and explore different shapes.

It’s very straightforward: one layer has the background image and a second layer has the additional clip path with a basic shape.

For the last demo, where I wanted to show two circles, I simply stacked two clip-path layers. But for more complex paths, one could also use an SVG instead.

Other interesting things that could be done here is to animate the clip-path (scale it/move it) or change the shape for each link. What do you think?

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.