Перевести с CSS на вершину div

Question

У меня есть 3 коробки в контейнере для жидкости.

В каждом окне есть заголовок, значок и текст ниже.

:hover Я хочу, чтобы значок переместился в начало <div> и изменил его размер, мне удалось «достичь» его, но используя определенное количество пикселей.

Это не будет работать в мобильных разрешениях, если текст заголовка длиннее и занимает 2 строки.

Вот что я сделал до сих пор:

Fiddle here

HTML

<div class="container"> 
<div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollIn"> 
     <div class="service-box"> 
      <h2>Title</h2> 
      <i class="fa fa-5x fa-paper-plane wow bounceIn market-icon" data-wow-delay=".1s"></i> 
      <p class="">Certain text below the icon</p> 
     </div> 
    </div> 
</div> 

CSS

.container{ 
    text-align:center; 
} 

.market-blocks{ 
    background: #3aa0d1; 
    padding: 30px 0 30px 0; 
    cursor:pointer; 
} 

.orange{ 
    background: #e97d68; 
} 

i.market-icon { 
    -webkit-transition: 1s ease-in; 
    -moz-transition: 1s ease-in; 
    -o-transition: 1s ease-in; 
    transition: 1s ease-in 
} 

.market-blocks:hover i.market-icon { 
    -webkit-transform: translate(0,-70px); 
    -moz-transform: translate(0,-70px); 
    -o-transform: translate(0,-70px); 
    -ms-transform: translate(0,-70px); 
    transform: translate(0,-70px); 
    font-size: 1.8em; 
} 

Как я могу это сделать? А также есть ли лучший способ сделать движение от исходного положения до вершины <div>?

Answer 1

Pure HTML/CSS solution:

.container { 
 
    text-align: center; 
 
} 
 

 
.market-blocks { 
 
\t background: #3aa0d1; 
 
\t padding: 30px 0; 
 
\t cursor: pointer; 
 
} 
 

 
.orange { 
 
    background: #e97d68; 
 
} 
 

 
.service-box { 
 
    display: inline-block; 
 
} 
 

 
.service-box-header { 
 
    position: relative; 
 
} 
 

 
.market-title { 
 
    padding-bottom: 5em; 
 
    -webkit-transition: 1s ease-in; 
 
    transition: 1s ease-in 
 
} 
 

 
.market-icon { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    -webkit-transition: 1s ease-in; 
 
    transition: 1s ease-in 
 
} 
 

 
    .market-blocks:hover .market-title { 
 
     padding-bottom: 0; 
 
    } 
 

 
    .market-blocks:hover .market-icon { 
 
     bottom: 100%; 
 
     font-size: 1.8em; 
 
    }

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollIn"> 
 
      <div class="service-box"> 
 
       <div class="service-box-header"> 
 
        <h2 class="market-title">Very-very-very-very-very-very-very-very loooooooooooooooooooong title</h2> 
 
        <i class="fa fa-5x fa-paper-plane wow bounceIn market-icon"></i> 
 
       </div> 
 
       <p class="">Certain text below the icon</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>