test

HTML

<div class="service-list">
  <div class="service-item">
    <div class="content">
      <h3>Заголовок№1</h3>
      <div class="descr">Значимость этих проблем настолько очевидна, что реализация намеченных плановых заданий позволяет оценить значение модели развития. Значимость этих проблем настолько очевидна, что сложившаяся структура организации требуют от нас анализа существенных финансовых и административных условий.</div>
    </div>
  </div>
  
  <div class="service-item">
    <div class="content">
      <h3>Очень большой-большой заголовок в три строки№2</h3>
      <div class="descr">Задача организации, в особенности же дальнейшее развитие различных форм деятельности способствует подготовки и реализации существенных финансовых и административных условий.</div>
    </div>
  </div>
  
  <div class="service-item">
    <div class="content">
      <h3>Заголовок№3</h3>
      <div class="descr">Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации направлений прогрессивного развития.</div>
    </div>
  </div>
  
</div>

CSS

.service-item{
  background:#333;
  color:#eee;
  width:240px;
  height:300px;  
  float:left;
  margin-right:20px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.content{
  position:absolute;
  top:0;
  padding:0 15px;
  transition: all .6s ease-out;  
}
.service-item:hover .content{  
  top:0 !important;  
}

JavaScript

$(document).ready(function () {                            
   $('h3').each(function(){
     var heighttitle = $(this).outerHeight(true); 
     var height = $('.service-item').height(); 
     var top = height - heighttitle;
     $('.content').css('top', top);
   });                                 
});