Выдвигающийся элемент с контеном при наведении

Question

Выдвигающийся элемент с контеном при наведении

Рейтинг: 1Ответов: 2Опубликовано: 21.04.2015

Подскажите пожалуйста решение.. Адаптивная верстка, выводятся картинки товаров в каталоге.. Нужно при наведении что бы выдвигался с низу блок с информацией. на подобие как тут ... Можно было бы просто решить используя css свойства, установив родителю overflow:hidden; и изменяя при :hover свойство - :magrin Но, проблема в том что, в адаптивной верстке я не могу задать жестко высоту.. А без жесткой высоты overflow:hidden; не работает, и большинство вариантов в сети предполагают установку жесткой высоты родителя..

javascript jquery css-animation

Источник: Stack Overflow на русском

Answer 1

▲ 1

$(document).ready(function() {
  $('.item').mouseenter(function() {
    var hidden = $(this).find('.hidden');
    hidden.slideDown();
  });
  $('.item').mouseleave(function() {
    var hidden = $(this).find('.hidden');
    hidden.slideUp();
  });
});

.item {
  float: left;
  position: relative;
  margin: 5px;
}
.info {
  position: absolute;
  background: #000;
  color: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/286.jpg">
  <div class="info">
    <div>Title</div>
    <div class="hidden">Hodden text</div>
  </div>
</div>

<div class="item">
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/286.jpg">
  <div class="info">
    <div>Title</div>
    <div class="hidden">Hodden text</div>
  </div>
</div>

<div class="item">
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/286.jpg">
  <div class="info">
    <div>Title</div>
    <div class="hidden">Hodden text</div>
  </div>
</div>

Answer 2

▲ 1

Вот реализовал на чистом css и html

.image_title{
    width:240px;
    height:360px;
    border:1px solid transparent;
    overflow:hidden;
}
.image_title img{
    width:240px;
    height:360px;
}
.title{
    width:240px;
    height:130px;
    background:rgb(86,59,57);
    position:relative;
    top:-45px;/*-155 */
    -moz-transition:1s;
    -webkit-transition:1s;
    -o-transition:1s;
    transition:1s;
}
.title h4{
    color:orange;
    margin-left:5px;
}
.title li{
    color:#fff;
}
.image_title:hover .title{
    top:-155px;
}

<div class="wrapper">
    <div class="image_title">
        <img src="http://mirolady.com/uploads/posts/2013-04/1365079154_x_0a0061b2_huge.jpg" alt="" />
            <div class="title">
        <h4>Боди <i>Gracio Nelli</i></h4>
        <ul>
            <li>Шикароное боди</li>
            <li>Низкая цена</li>
            <li>Возбуждающий вид</li>
        </ul>
    </div>
    </div>
</div>

Выдвигающийся элемент с контеном при наведении

Ответы