LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
  • Header

    Description of image thumbnail placeholder.

CSS
li {
  background: lightgreen;
  list-style:none;
  height: 200px;
  width: 150px;
  
  overflow: hidden;
  position: relative;
}

h3, p {
  margin: 0;
  position: absolute;
  transition: top .5s, bottom .5s .5s;
}

/* First Frame */
h3 {
  top: -18px;
}
p {
  background: rgba(255,255,255,.5) cubic-bezier(.51,.78,.68,.32);
  bottom: -55px;
}

/* Last Frame */
li:hover h3 {
  top: 0;
}
li:hover p {
  bottom: 0;
}

Description

Transitioning overlay content.
Term
Wed, 02/28/2018 - 20:14

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv