Card Hover Effect using html and CSS.
Hello guys, Planics Devloper is
providing HTML,CSS,BootStrap,JavaScript,PHP. If you want any design then
copy code from our post otherwise watch our video on blog.
If you want to design card hover or
something then click here and get latest design
free Click here
How to design Best product card hoverin 2020?
design beautiful card hover amination
using html and CSS . you learn in this video how to flip card using html and
CSS.
How to design different type ofanimation in one loader using html and css?
Free Cards Effect in HTML with CSS
how to design animated card for website
so please check it out in YouTube.
mouse hover flip animation on card using pure html and CSS. Here we show how to transform
any object using only CSS.
Here we show, card hover effect using
html and CSS.
card.html
|
<!DOCTYPE html>
<html>
<head>
<meta
charset='utf-8'>
<meta
http-equiv='X-UA-Compatible' content='IE=edge'>
<title>our
services</title>
<meta
name='viewport' content='width=device-width, initial-scale=1'>
<link
rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script
src='main.js'></script>
<link
rel='stylesheet' type='text/css' media='screen' href="style.css">
</head>
<body>
<div
class="heading">
<h1>our services</h1>
</div>
<div
class="container">
<div
class="card-container">
<div
class="full-card">
<div class="card-content">
<h1>web design</h1>
</div>
</div>
<div
class="card">
<div class="card-top hover1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officiis obcaecati earum, qui natus doloribus porro.</p>
</div>
</div>
</div>
<div
class="card-container">
<div
class="full-card">
<div class="card-content">
<h1>web devlopment</h1>
</div>
</div>
<div
class="card">
<div class="card-top hover2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officiis obcaecati earum, qui natus doloribus porro.</p>
</div>
</div>
</div>
<div
class="card-container">
<div
class="full-card">
<div class="card-content">
<h1>UI/UX design</h1>
</div>
</div>
<div
class="card">
<div class="card-top hover3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officiis obcaecati earum, qui natus doloribus porro.</p>
</div>
</div>
</div>
</div>
</body>
</html>
|
|
{
padding: 00px;
margin:00px;
box-sizing:
border-box;
}
.heading
{
height: 20vh;
width:100%;
display:flex;
justify-content:center;
align-items:center;
color:grey;
background-color: #293241;
font-size: 30px;
box-sizing:
border-box;
padding-top:
20px;
}
.heading h1
{
border-bottom:
1px solid gray;
}
.container
{
height: 80vh;
width:100%;
display:flex;
justify-content:space-evenly;
align-items:center;
background-color: #293241;
color: grey;
box-sizing:
border-box;
}
.card-container
{
height: 150px;
width:250px;
position:
relative;
}
.full-card
{
height: 100%;
width:100%;
box-shadow: 0px
10px 40px #001845;
position:
absolute;
background-color: #293241;
z-index: 5;
display:flex;
align-items:center;
justify-content:
center;
}
.card
{
height: 100%;
width:100%;
position:
absolute;
z-index: 2;
}
.card-content
{
text-align:
center;
}
.card-top
{
height: 100%;
width:100%;
position:
absolute;
top:00px;
background-color: #ffba08;
color:white;
transition: all
.5s;
border-radius:
10px;
padding: 10px;
box-sizing:
border-box;
}
.card-container:hover .hover1
{
top:-80%;
transform:rotate(30deg) scale(1.1);
}
.card-container:hover .hover2
{
top:-80%;
transform:
scale(1.1);
}
.card-container:hover .hover3
{
top:-80%;
transform:rotate(30deg) scale(1.1);
}
|
0 coment�rios: