How to Design card with different mouse hover effect using HTML and CSS
This is attractive card in html with
CSS we providing good design for developing website.
We try to Provide best designing with
Accurate and simple code.
How to design Team section card using htmland CSS?
Free Cards Effect in HTML with CSS
How to design classic card with mouse hover effect using only html and CSS? Card tutorials
Card.html
<!DOCTYPE html>
<html>
<head>
<meta
charset='utf-8'>
<meta
http-equiv='X-UA-Compatible' content='IE=edge'>
<title>card hover</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="container">
<div
class="card">
<img
src='images/team2.jpg'>
<div
class="card-data">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Accusantium, earum. Laborum inventore a doloribus quis.</p>
</div>
</div>
<div
class="card">
<img
src='images/team3.jpg'>
<div
class="card-data2">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Accusantium, earum. Laborum inventore a doloribus quis.</p>
</div>
</div>
<div
class="card">
<img
src='images/team4.jpg'>
<div
class="card-data3">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Accusantium, earum. Laborum inventore a doloribus quis.</p>
</div>
</div>
</div>
</body>
</html>
|
How to design Animated loader using html
and CSS?
Card.css
/* background-color:#e63946;
background:#0077b6;
background-color: #1c2541; */
*
{
margin: 00px;
padding:00px;
box-sizing:
border-box;
}
.container
{
height: 100vh;
width: 100%;
display:flex;
justify-content:
space-evenly;
align-items:
center;
}
.card
{
height: auto;
width:250px;
position:
relative;
overflow:
hidden;
}
img
{
width: 100%;
}
.card-data,.card-data2,.card-data3
{
height: 100%;
width:Auto;
position:
absolute;
top:-100%;
left: 00px;
padding:10px;
display: flex;
align-items:
center;
justify-content:
center;
background-color: #e63946;
opacity: .8;
color:white;
transition: all
ease-in-out 1s;
}
.card-data2
{
background:#0077b6;
}
.card-data3
{
background:#1c2541;
}
p
{
border-top: 1px
solid white;
border-bottom:
1px solid white;
padding:10px
00px;
}
.card:hover
.card-data
{
top:00px;
transform:
rotate(30deg);
}
.card:hover
.card-data2
{
top:00px;
}
.card:hover
.card-data3
{
top:00px;
transform:
rotate(-30deg);
}
|
0 coment�rios: