Skip to content

Instantly share code, notes, and snippets.

@stMayhem
Last active October 28, 2017 10:03
Show Gist options
  • Save stMayhem/843f64ce2421516394b74228045fd059 to your computer and use it in GitHub Desktop.
Save stMayhem/843f64ce2421516394b74228045fd059 to your computer and use it in GitHub Desktop.
levitate div with shadow
.service:hover {
transition: transform 0.5s ease-in-out;
transform: translateY(-3%);
}
.service:hover::after {
opacity: 1;
}
.service::after {
content: '';
position: absolute;
top: 0;
z-index: -5;
height: 347px;
display: inline-block;
width: 100%;
opacity: 0;
border-radius: 14px;
box-shadow: 0 5px 44px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease-in-out;
}
.service {
height: 347px;
transform: translateY(0%);
transition: transform 0.5s ease-in-out;
animation: top 7s ease;
position: relative;
border-radius: 14px;
box-shadow: 0 2px 34px 0 rgba(0, 0, 0, 0.1);
float: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment