How to make card hover animation effect use HTML & CSS ?
CSS HOVER ANIMATION EFFECT SOURCE_CODE:-
HTML SOURCE_CODE:-
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>css animation</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
<script src='main.js'></script>
</head>
<body>
<h6 class="text-css">CSS Animation</h6>
<br>
<div class="container">
<div class="card">
<div class="face face1">
<div class="content">
<h2>Art spidrt</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Error illum ad dolor laudantium enim ipsa libero adipisci culpa </p>
<a href="#">Read More</a>
</div>
</div>
<div class="face face2 f1">
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<h2>
Art Spider
</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error
illum ad
dolor laudantium enim ipsa libero adipisci culpa </p>
<a href="#">Read More</a>
</div>
</div>
<div class="face face2 f2">
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<h2>Art Spider</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Error illum ad dolor laudantium enim ipsa libero adipisci culpa </p>
<a href="#">Read More</a>
</div>
</div>
<div class="face face2 f3">
</div>
</div>
</div>
</body>
</html>
CSS SOURCE_CODE:-
@import url('http://fonts.googleapis.com/css?family=Poppins');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Poppins',sans-serif;
}
.text-css{
font-size: 70px;
display: flex;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
}
body{
min-height: 100vh;
background: #3c3c4b;
}
.container{
display: flex;
justify-content: center;
align-items: center;
width: 1100px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap:15px;
margin:0 auto;
}
.container .card{
position: relative;
width: 300px;
height: 400px;
margin: 0 auto;
background: #fff;
transition: 0.5s;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.container .card:hover{
box-shadow: 0 30px 50px rgba(0,0,0,.2);
}
.container .card .face{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container .card .face.face1{
box-sizing: border-box;
padding: 20px;
text-align: center;
background: rgb(255, 255, 255);
color: #3c3c4b;
}
.container .card .face.face1 h2{
margin-top: 60px;
}
.container .card .face.face1 a{
display: inline-block;
padding: 5px 10px;
margin-top: 20px;
text-decoration: none;
color: #07c317;
border:2px solid #07c326;
transition: 0.5s;
}
.container .card .face.face1 a:hover{
color:#fff;
background: #22fb87;
}
.container .card .face.face2{
transition: 0.5s;
}
.container .card:hover .face.face2{
height: 80px;
width: 80px;
border-radius: 20%;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
.container .card .face.face2 h2{
margin: 0px;
padding: 0;
font-size: 10em;
color: #fff;
transition: 0.5s;
}
.container .card:hover .face.face2 h2{
color:#07c375;
font-size: 2em;
}
.f1{
background-image: url("img/kartikey-panchal-FiKgmvZqFT8-unsplash.jpg");
background-size: cover;background-position-x:50%;
backdrop-filter:2px;
}
.f2{
background-image: url("img/lino-montes-nnYP-IGYNmU-unsplash.jpg");
background-size: cover;
backdrop-filter:2px;
}
.f3{
background-image: url("img/elijah-hiett-vAVGdV1oklQ-unsplash.jpg");
background-size: cover;
backdrop-filter:2px;
}
My YOUTUBE
Channel
Hello VIP viewers , welcome🎉🎉🎉
My YouTube channel👍
Please don't forget subscribe my YouTube channel. 🤓🙂🙂🙂🙂.
css javascript html tutorial.
#webdesit
#csshover
#csshoveranimation
#css
#HTML
#HTML5
#artwork
card hover effect in css,css responsive card hover effects html & css,css responsive card hover effects,css responsive card hover effects html5 & css3,css card hover effects html css,css card hover effects,CSS,HTML,CSS tutorial,css hover effects tutorial,css hover effects image,css hover animation,css hover effects,css animation,css animation tutorial,css animation text,css animation examples,css animation website,web design,css animation effects,css effects
Comments
Post a Comment