Показать сообщение отдельно
  #2 (permalink)  
Старый 24.05.2017, 23:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,587

kos0760,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/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:0px;
  padding:0 15px;
  transition: all .6s ease-out;
}
.service-item:hover .content{
  top:0!important;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$('.service-item').each(function(i,el){
     var heighttitle = $('h3',el).outerHeight(true);
     var height = $(el).height();
     var top = height - heighttitle;
     $('.content',el).css({'top': top});
   });
});
  </script>
</head>

<body>
 <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>

</body>
</html>
Ответить с цитированием