Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Image revealing from text on hover

Image revealing from text on hover

SVG clip path made of text reveals image on hover.

A Pen by web-tiki on CodePen.

License.

<svg viewbox="0 0 50 50" width="50" height="50">
<defs>
<mask id="mask" x="0" y="0" width="100" height="49">
<rect x="0.5" y="0.5" width="49" height="49" fill="#fff"/>
<text x="20" text-anchor="middle" y="50" dy="0">S</text>
<text x="25" id="ltrV" text-anchor="middle" y="50" dy="0">V</text>
<text x="30" text-anchor="middle" y="50" dy="0">G</text>
</mask>
</defs>
<rect x="0.5" y="0.5" width="49" height="49" mask="url(#mask)" fill-opacity="1" fill="#E3DFD2"/>
</svg>
body,html{height:100%;margin:0;padding:0;background:#E3DFD2}
svg{
background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');
background-size:cover;
width:40vmin; height:auto;
display:block;
margin:30vmin auto;
}
text{
font-size:10px;
transition:font-size .4s ease-out;
font-weight:900;
font-family:arial;
}
svg:hover text{
transition:font-size .4s ease-in;
font-size: 300px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment