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:
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/03/demo1clip.jpg)
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.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/03/demo2clip.jpg)
It’s very straightforward: one layer has the background image and a second layer has the additional clip path with a basic shape.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/03/demo3clip.jpg)
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.
![](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2020/03/demo4clip-1.jpg)
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?
Background Scale Hover Effect with CSS Clip-path was written by Mary Lou and published on Codrops.