Home Ask Login Register

Developers Planet

Your answer is one click away!

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.


scaisEdge February 2016

They coukd change the maxHeight ...

.read_more {
   maxHeight: 2px;

.read_more:hover {
  maxHeight: 30px;

marcelo2605 February 2016

See if this simple example helps:

  width: 300px;
  height: 300px;
  position: relative;

  width: 100%;
  height: 64px;
  background: gray;
  position: absolute;
  bottom: -28px;

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

.main:hover .hovered{
  bottom: 0;


Jannik February 2016

Here is a pure CSS solution I quickly hacked up: CSS Hover Effect

h1, h2, h3, h4, h5{    

  overflow: hidden;
  width: 400px;

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

  transition: all 0.5s ease;
  background-color: #333;
  color: #fafafa;
  padding: 1em;
  top: -1em;
<div class="tile">
  <img src="http://lorempixel.com/400/300">
  <div class="body">
    <h2>Test Header</h2>
    <p>Info to display</p>

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:


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


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


$('.wrapper').on('mouseenter', function(){
        }).on('mouseleave', function(){

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


Leave an answer

Quote of the day: live life