Next level Card Hover Effects | Html & CSS | 2020
Legenddocx Creation represents you In this Video How to amazing card hover effects using HTML, CSS.
Screenshot - 1
Screenshot - 2
Screenshot - 2
Screenshot - 3
Screenshot - 4
Code Here
HTML
<html>
<head>
<title>Indian Youtubers</title>
</head>
<body>
<div class="title">
<h1><span style="color: #ff9f43">Ind</span><span style="color: #0abde3">ian</span> <span style="color: #ee5253">You</span><span style="color: #00d2d3">Tube<span><span style="color: #5f27cd">rs<span></h1>
</div>
<div class="card1">
<img src="../bhuvan.png">
<h3>Bhuvan Bam</h3>
<p>Bhuvan Bam is an Indian comedian, singer, songwriter, and YouTube personality from Delhi, India. He is known for his YouTube comedy channel BB Ki Vines. In 2018, Bam became the first Indian individual YouTube content creator to cross 10 million subscribers.</p>
</div>
<div class="card2">
<img src="../ashish.png">
<h3>Asish Chanchalani</h3>
<p>Ashish Chanchlani is an Indian comedian and YouTube personality from Ulhasnagar, Maharashtra, India. He is known for his YouTube channel, Ashish Chanchlani Vines.</p>
</div>
<div class="card3">
<img src="../carry.png">
<h3>Carry Minati</h3>
<p>Ajey Nagar, better known as Carry Minati, is an Indian YouTuber and streamer from Faridabad, India. He is known for his comedic skits and reactions to various online topics on his channel CarryMinati.</p>
</div>
<div class="footer">
</div>
</body>
</html>
CSS
<style>
@import url('https://fonts.googleapis.com/css?family=Exo:700');
@import url('https://fonts.googleapis.com/css?family=Abel');
body {
background-color: #dfe6e9;
-webkit-transform: perspective(900px);
-webkit-transform-style: preserve-3d;
}
.title {
width=100%;
text-align: center;
}
.title h1 {
font-size: 50px;
margin-top: 50px;
font-family: 'Exo', sans-serif;
}
.card1 {
text-align: center;
position: absolute;
left: 100px;
width: 250px;
height: 350px;
margin-top: 10px;
margin-bottom: 10px;
background: linear-gradient(rgb(225, 150, 58), rgb(227, 144, 91));
transition: .6s;
transform: rotatex(75deg) translatey(-200px) translatez(-100px);
box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5);
}
.card1:hover {
transform: rotatex(0deg);
transform: rotatez(0deg);
transition: .6s;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.card1 img {
transform: translateY(15px);
width: 200px;
height: 120px;
}
h3 {
font-size: 25px;
font-family: 'Abel', sans-serif;
color: rgb(255, 255, 255);
text-shadow: 0 0 2px rgb(255, 255, 255);
transform: translatey(10px);
}
p {
font-family: 'Abel', sans-serif;
color: white;
font-size: 14px;
text-align: center;
width: 220px;
transform: translatex(12px);
}
.card2 {
text-align: center;
position: absolute;
left: 550px;
width: 250px;
height: 350px;
margin-top: 10px;
margin-bottom: 10px;
background: linear-gradient(rgb(93, 94, 170), rgb(93, 66, 103));
animation: animate 1s linear infinite;
transition: .6s;
transform: rotatex(75deg) translatey(-200px) translatez(-100px);
box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5);
}
.card2:hover {
transform: rotatex(0deg);
transition: .6s;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.card2 img {
transform: translateY(15px);
width: 180px;
height: 150px;
}
.card3 {
text-align: center;
position: absolute;
left: 1000px;
width: 250px;
height: 350px;
margin-top: 10px;
margin-bottom: 10px;
background: linear-gradient(#ff5252, #b33939);
transition: .6s;
transform: rotatex(75deg) translatey(-200px) translatez(-100px);
box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5);
}
.card3:hover {
transform: rotatex(0deg);
transition: .6s;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.card3 img {
transform: translateY(15px);
width: 200px;
height: 120px;
}
.footer {
position: absolute;
top: 500px;
margin: 10px;
width: 100%;
text-align: center;
}
.footer h2 {
font-size: 18px;
font-family: 'Exo', sans-serif;
}
</style>
Post a Comment