Эмуляция определенного 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

Они могут изменить максимальную высоту...

.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

You can do it using some 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');
    });

Here is the fiddle: https://jsfiddle.net/bk9x3ceo/2/

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