Awesome Card Hover Effect Using HTML & CSS |Legenddocx Creation |

Irfan Hussain
May 14, 2020
Awesome Card Hover Effect Using HTML & CSS |Legenddocx Creation |




Source Code:--
HTML

<html>

<head>
<title>Card</title>

</head>

<body>

<div class="animated-card">
<div class="youtube">
<img src="../youtube.png" alt="Youtube" height="80">
<h3>Legenddocx_creation</h3>
<span>Subscribe to My Channel</span>
</div>
<div class="instagram">
<img src="../instagram.png" alt="Instagram" height="40" style="margin-left: 30px;">
<h3>Legenddocx_creation</h3>
<span>Follow me on Instagram</span>
</div>
<div class="facebook">
<img src="../facebookk.png" alt="facebook" height="74">
<h3>Legenddocx_creation</h3>
<span>Follow me on facebook</span>
</div>
<div class="twitter">
<img src="../twiiter.png" alt="Twitter" height="40" style="margin-left: 30px;">
<h3>Legenddocx_creation</h3>
<span>Follow me on Twitter</span>
</div>
</div>


</body>

</html>

CSS

<style>
html,
body {
height: 100%;
}

body {
display: grid;
font-family: Avenir, sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}

.animated-card {
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -140px;
user-select: none;
transform: translate3d(0, 0, 0);
transform-style: preserve-3d;
}

.animated-card:after {
position: absolute;
bottom: -27px;
left: 5%;
content: '';
width: 65%;
height: 10px;
border-radius: 100%;
background-image: radial-gradient(rgba(34, 50, 84, 0.04), rgba(34, 50, 84, 0));
}

.animated-card>div {
position: relative;
width: 280px;
height: 140px;
border-radius: 12px;
color: #fff;
transform: rotateX(45deg) rotateY(-15deg) rotate(45deg);
transition: all 0.4s ease;
overflow: hidden;
cursor: pointer;
}

.animated-card>div:after {
position: absolute;
top: -70px;
left: 0;
content: '';
width: 200%;
height: 200%;
background-image: linear-gradient(60deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 80%);
transform: translateX(-100%);
}

.animated-card>div img {
margin-top: 15px;
pointer-events: none;
}

.animated-card>div h3 {
position: absolute;
bottom: 28px;
left: 15px;
font-size: 18px;
font-weight: 800;
}

.animated-card>div span {
position: absolute;
font-weight: 700;
bottom: 15px;
left: 15px;
font-size: 12px;
font-weight: 600;
opacity: 0.8;
}

.animated-card>div.youtube {
margin-top: 0;
z-index: 3;
background-color: #8063e1;
background-image: linear-gradient(135deg, #bd7be8, #8063e1);
box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #8063e1;
}

.animated-card>div.instagram {
margin-top: -70px;
z-index: 2;
background-color: #3f58e3;
background-image: linear-gradient(135deg, #7f94fc, #3f58e3);
box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #3f58e3;
}

.animated-card>div.facebook {
margin-top: -70px;
z-index: 1;
background-color: #2c6fd1;
background-image: linear-gradient(135deg, #21bbfe, #2c6fd1);
box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #2c6fd1;
}

.animated-card>div.twitter {
margin-top: -70px;
background-color: #352f64;
background-image: linear-gradient(135deg, #415197, #352f64);
box-shadow: 5px 5px 60px rgba(34, 50, 84, 0.1), 1px 1px 0px 1px #352f64;
}

.animated-card>div:hover {
transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px);
}

.animated-card>div:hover:after {
transform: translateX(100%);
transition: all 1.2s ease-in-out;
}

a {
position: fixed;
bottom: 20px;
right: 20px;
color: #07f;
font-size: 14px;
font-weight: 700;
width: 126px;
height: 22px;
}

</style>