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

#css #css3 #svg #анимация

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



Мне удалось, так реализовать, как в примере ниже, но мне кажется, что решение не
очень красивое!    Можно ли это, как-то по другому сделать?

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






    

Ответы

Ответ 1

Вот более чистая версия:



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



Ответ 2

У меня удалось так реализовать но мне кажется что решение не красивое ! 
Можно ли это как то по другому сделать?



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



Ответ 3

Вот ещё одно решение



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





Источник