Image revealing from text on hover

Image revealing from text on hover.markdown

Image revealing from text on hover

SVG clip path made of text reveals image on hover.

A Pen by web-tiki on CodePen.

License.

index.html

<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>

style.css

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;
}