Как реализовать эффект появления фото?

Увидел эффект с фото но ради профессионального интереса не стал открывать "просмотр кода" и решил сам реализовать, то что на скриншоте :

Мне удалось, так реализовать, как в примере ниже, но мне кажется, что решение не очень красивое! Можно ли это, как-то по другому сделать?
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; }

Ответ

Вот более чистая версия:
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; letter-spacing: -1px; } svg:hover text { transition: font-size .4s ease-in; font-size: 600px; }