Эмуляция специфический CSS эффект при наведении

Question

Я пытаюсь подражать парения эффект, который вы можете увидеть здесь: http://www.timeout.com/newyork (При наведении на изделиях.)

Я понимаю, как сделать Div шаг дальше: парить, что я не понимаю, так это то, как они скрыли кнопку «читать дальше» до тех пор, пока div не зависнет.

По существу, я хотел бы знать, как скрыть div до мышки, затем вытащите его из-под другого.

Answer 1

Вот чистый CSS решение, которое я быстро изрубил: CSS Hover Effect

h1, h2, h3, h4, h5{  
 
    margin:0px; 
 
} 
 

 
.tile{ 
 
    overflow: hidden; 
 
    width: 400px; 
 
    height:350px; 
 
} 
 

 
.tile:hover > .body{ 
 
    transition: all 0.5s ease; 
 
    top: -3em; 
 
} 
 

 
.body{ 
 
    transition: all 0.5s ease; 
 
    background-color: #333; 
 
    margin:0px; 
 
    color: #fafafa; 
 
    padding: 1em; 
 
    position:relative; 
 
    top: -1em; 
 
}

<div class="tile"> 
 
    <img src="http://lorempixel.com/400/300"> 
 
    <div class="body"> 
 
    <h2>Test Header</h2> 
 
    <p>Info to display</p> 
 
    </div> 
 
</div>

В принципе, я просто изменить положение текста DIV, когда я наведите курсор мыши на основной DIV и добавить анимации перехода к нему.

Answer 2

Они coukd изменить MaxHeight ...

.read_more { 
    maxHeight: 2px; 
    overflow:hidden; 
} 

.read_more:hover { 
    maxHeight: 30px; 
} 

Answer 3

Смотрите, если этот простой пример помогает:

.main{ 
    width: 300px; 
    height: 300px; 
    position: relative; 
    background:yellow; 
    overflow:hidden; 
} 

.hovered{ 
    width: 100%; 
    height: 64px; 
    background: gray; 
    position: absolute; 
    bottom: -28px; 
} 

.hovered span{ 
    background: red; 
    color: #fff; 
    display:block; 
    width: 100%; 
    padding: 5px 0; 
} 

.main:hover .hovered{ 
    bottom: 0; 
} 

https://jsfiddle.net/4zak8bfp/

Answer 4

Вы можете сделать это, используя некоторые методы jQueryaddClass() и removeClass().

Вот пример:

HTML:

<div class="wrapper"> 
<div class="caption"> 
<H1>This is a title</H1> 
<p> 
This is sample contents... 
</p> 
<div class="read-more-wrapper"> 
<a href="#">Read More</a> 
</div> 
</div> 
</div> 

CSS:

.wrapper{ 
    position: relative; 
    width: 450px; 
    height: 250px; 
    background-color: #2f89ce; 
    overflow: hidden; 
} 
.caption{ 
    display: block; 
    position: absolute; 
    bottom: -30px; 
    width: 100%; 
    height: auto; 
    background-color: #fff; 
    transition: all ease-in-out 0.3s; 
} 
.read-more-wrapper{ 
    background-color: #d03134; 
    height: 30px; 
} 
.slidein{ 
    bottom: 0; 
    transition: all ease-in-out 0.3s; 
} 

JQuery:

$('.wrapper').on('mouseenter', function(){ 
     $(this).find('.caption').addClass("slidein"); 
     }).on('mouseleave', function(){ 
      $(this).find('.caption').removeClass('slidein'); 
    }); 

Вот скрипка: https://jsfiddle.net/bk9x3ceo/2/

Надеюсь, что это поможет.