Skip to content

Instantly share code, notes, and snippets.

@Jvalal-zz

Jvalal-zz/gist:00be1aa3b0d700be913fcec69af4c6cc

Created February 26, 2019 20:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Jvalal-zz/00be1aa3b0d700be913fcec69af4c6cc to your computer and use it in GitHub Desktop.
Save Jvalal-zz/00be1aa3b0d700be913fcec69af4c6cc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
.Card {
display: grid;
grid-template: 1fr 1fr;
max-width: 300px;
height: 225px;
position: relative;
overflow: hidden;
transition:0.8s cubic-bezier(0.2, 0.82, 0.165, 1);
cursor: pointer;
box-shadow: 0 20px 40px rgba(0,0,0,0.25);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
-webkit-transition:0.8s cubic-bezier(0.2, 0.82, 0.165, 1);
-moz-transition:0.8s cubic-bezier(0.2, 0.82, 0.165, 1);
-ms-transition:0.8s cubic-bezier(0.2, 0.82, 0.165, 1);
-o-transition:0.8s cubic-bezier(0.2, 0.82, 0.165, 1);
}
.Card:hover {
transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
box-shadow: 0 30px 60px rgba(0,0,0,05);
}
.Card:hover img {
transform: translateY(-20px);
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
}
.Card img {
position:absolute;
top: 0;
height: 110%;
z-index: -1;
transition:0.8s cubic-bezier(0.2, 0.82, 0.165, 1);
-webkit-transition:0.8s cubic-bezier(0.2, 0.82, 0.165, 1);
-moz-transition:0.8s cubic-bezier(0.2, 0.82, 0.165, 1);
-ms-transition:0.8s cubic-bezier(0.2, 0.82, 0.165, 1);
-o-transition:0.8s cubic-bezier(0.2, 0.82, 0.165, 1);
}
.Cards h2 {
margin: 50px 20px;
font-size: 60px;
text-align: center;
font-weight: 700;
background: linear-gradient(104deg, #050A27 0%, #4A548C 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.Card h3{
color: white;
font-size: 30px;
margin: 20px 0 0 20px;
width: 190px;
}
.Card p {
color: rgba(255,255,255,0.8);
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
align-self: end;
margin: 0 0 20px 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment