Увидел эффект с фото, но ради профессионального интереса не стал открывать "просмотр кода" и решил сам реализовать, то что на скриншоте :
Мне удалось, так реализовать, как в примере ниже, но мне кажется, что решение не очень красивое! Можно ли это, как-то по другому сделать?
body,
html {
height: 100%;
margin: 0;
padding: 0;
background: #E3DFD2
}
svg {
background: url('http://www.frombearcreek.com/wp-content/uploads/2016/07/2016_07_15_Rule-Five-Friday-1-1024x683.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: 600px;
}
<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">e</text>
<text x="30" text-anchor="middle" y="50" dy="0">e</text>
</mask>
</defs>
<rect x="0.5" y="0.5" width="49" height="49" mask="url(#mask)" fill-opacity="0.6" fill="#222000"/>
</svg>