Michael February 2016

Emulating a specific CSS hover effect

I'm trying to emulate the hover effect you can see here: http://www.timeout.com/newyork (When you hover on the articles.)

I understand how to make a div move on :hover, what I don't understand is how they've hidden the "read more" button until the div is hovered over.

Essentially I would like to know how to hide a div until mouse over, then have it slide out from under another.

Answers


scaisEdge February 2016

They coukd change the maxHeight ...

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

.read_more:hover {
  maxHeight: 30px;
}


marcelo2605 February 2016

See if this simple example helps:

.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/


Jannik February 2016

Here is a pure CSS solution I quickly hacked up: 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>

Basically, I just change the position of the text div when I hover over the main div and add a transition animation to it.


DebRaj February 2016

You can do it using some jQuery addClass() and removeClass() methods.

Here is an example:

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/

Hope that helps.

Post Status

Asked in February 2016
Viewed 1,401 times
Voted 10
Answered 4 times

Search




Leave an answer