← All elements
<div class="lz"><div class="big"></div></div>About this hover effect
A circular lens that opens over a pattern on hover and magnifies the detail inside it, with no script.
How it works
The same checker pattern is drawn twice: once at normal size in the tile and once at three times the size inside a circular lens in the middle. clip-path circle grows from zero on hover, revealing the magnified copy as a lens.
Ways to customise it
- Change the pattern colours.
- Make the lens larger by raising 110px.
- Place a real image in both layers instead.
Good to know
This is a visual demonstration of a fixed-position lens; a movable lens needs script. Use a high-resolution image for the zoomed layer when you adapt it.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.