CSS JQuery: How to create card hover style effect like GOOGLE now cards.

<style type="text/css">

body {
background: url(gre.jpg);
}
.container {
position: relative;
margin: 0 auto;
top: 10px;
width: 100%;
height: 350px;
-webkit-perspective: 600px;
perspective: 600px;
text-align: center;
}
.item {
display: inline-block;
position: relative;
font-family: verdana;
color: white;
font-size: 20px;
margin: 15px;
width: 200px;
height: 250px;
line-height: 300px;
background-color: #33b5e5;
border-radius: 10px;
-webkit-animation: animOpp 0.4s 1;
animation: animOpp 0.4s 1;
box-shadow: 1px 1px 5px white;
}
.item:hover {
-webkit-animation: anim ease-out 0.5s 1;
animation: anim 0.5s 1;
transform: translateZ(30px);
cursor: pointer;
}
.item:active {
-webkit-transform: translateZ(26px);
transform: translateZ(26px);
}
@-webkit-keyframes anim {
0% {
transform: rotateX(0deg) translateZ(0px);
}
25% {
transform: rotateX(-4deg) translateZ(15px);
}
37% {
transform: rotateX(-8deg) translateZ(30px);
transform-origin: 50% 0%;
}
72% {
transform-origin: 50% 0%;
transform: rotateX(-4deg) translateZ(30px);
}
100% {
transform-origin: 50% 0%;
transform: rotateX(0deg) translateZ(30px);
}
}

@-moz-keyframes anim {
0% {
transform: rotateX(0deg) translateZ(0px);
}
25% {
transform: rotateX(-4deg) translateZ(15px);
}
37% {
transform: rotateX(-8deg) translateZ(30px);
transform-origin: 50% 0%;
}
72% {
transform-origin: 50% 0%;
transform: rotateX(-4deg) translateZ(30px);
}
100% {
transform-origin: 50% 0%;
transform: rotateX(0deg) translateZ(30px);
}
}
@-webkit-keyframes animOpp {
0% {
transform: translateZ(30px);
}
35% {
transform: translateZ(20px);
}
100% {
transform: translateZ(0px);
}
}
@-moz-keyframes animOpp {
0% {
transform: translateZ(30px);
}
35% {
transform: translateZ(20px);
}
100% {
transform: translateZ(0px);
}
}

</style>

<body>
<div class="container">
<div class="item">Content Goes Here</div>
<div class="item">Content Goes Here</div>
<div class="item">Content Goes Here</div>
<div class="item">Content Goes Here</div>
<div class="item">Content Goes Here</div>
<div class="item">Content Goes Here</div>
<div class="item">Content Goes Here</div>
<div class="item">Content Goes Here</div>
</div>
</body>

Output :)

1)

CSS JQuery

Friday, January 2, 2015

How to create card hover style effect like GOOGLE now cards.

No comments:

Post a Comment