LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
pepsi
bottom to top
pepsi
left to right
pepsi
top to bottom
pepsi
right to left
CSS
/* 
when .item:hover, show overlay.
overwrite .item-overlay."position"
*/
.item:hover .item-overlay.top {
  top: 0;
}
.item:hover .item-overlay.right {
  right: 0;
  left: 0;
}
.item:hover .item-overlay.bottom {
  bottom: 0;
}
.item:hover .item-overlay.left {
  left: 0;
}

/* 
by default, overlay is visible… 
*/
.item-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  
  background: rgba(0,0,0,0.5);
  color: #fff;
  overflow: hidden;
  text-align: center;
  /* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */
  width: 100%; 
  
  -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
/*
…but this hide it
*/
.item-overlay.top {
  top: 100%;
}
.item-overlay.right {
  right: 200%;
  left: -100%;
}
.item-overlay.bottom {
  bottom: 100%;
}
.item-overlay.left {
  left: 100%;
}


/* misc. CSS */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.item {
  position: relative;
  
  border: 1px solid #333;
  float: left;
  margin: 2%;
  overflow: hidden;
  width: 21%;
  max-width: 540px;
}
.item img {
  max-width: 100%;
}
/* end of misc. CSS */
Host Instantly Drag and Drop Website Builder

 

Description

Just a 100% CSS overlay transitions from different starts: 1 : from bottom to top. 2 : from left to right.
Term
Mon, 11/27/2017 - 22:07

Related Codes

Pen ID
Pen ID
Pen ID