Показать сообщение отдельно
  #3 (permalink)  
Старый 21.08.2015, 13:13
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

Такие штуки можно и без js делать, с помощью css transition:
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
#wrapper{
  width: 800px;
  height: 200px;
}
.image{
  width: 200px;
  height: 200px;
  float: left;
  outline: 1px solid red;
  overflow: hidden;
}
.inner{
  padding: 10px;
  background: rgba(48,36,36,0.5);
  margin: 160px 0 0 0;
  transition: all 0.5s;
}
.image:hover .inner{
  margin: 0;
}
        </style>
    </head>
    <body>

<div id="wrapper">
  <div class="image">
    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit dicta mollitia adipisci atque nemo nobis enim ipsa ad soluta optio assumenda, tempora dolorem, amet reprehenderit eos neque doloremque esse placeat.</div>
  </div>
  <div class="image">
    <div class="inner">Ut voluptate beatae officia deserunt, enim quibusdam. Culpa ex asperiores quo praesentium eaque magni et explicabo, perferendis similique voluptates dolores voluptatem sit unde dolorem, officiis deserunt, deleniti debitis a placeat.</div>
  </div>
  <div class="image">
    <div class="inner">Consequuntur dignissimos, aliquam nisi ullam cumque, dolores cum voluptatem earum libero sunt odio molestiae! Nulla repellendus eligendi, eius ipsam libero consectetur amet voluptatem molestiae, sint nobis et? Voluptas doloremque, sint!</div>
  </div>
  <div class="image">
    <div class="inner">Soluta ipsa, quibusdam. Quibusdam hic voluptate nihil voluptatem neque, aliquid minima est quae architecto optio, rem. Iusto inventore obcaecati nisi cum necessitatibus, animi laudantium dolor, adipisci harum consequatur, quibusdam totam.</div>
  </div>
</div>

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