Mouse Hover Effect on Card using html and CSS
Planics Devloper provides you web
designs it’s really used for site.
We are giving
HTML,CSS,BootStrap,JavaScript,PHP.
If you want to design card or something
then click here and get latest design free
Click here
How to css text hover effects card in2020?
Here we show you how to design best
attractive card for e-commerce website so please check it out in YouTube.
Free css 3d card Effect in HTML with CSS
How to design hover css animationeffect?
cardhover.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 hover1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Velit dolorum hic in architecto voluptate placeat odio quibusdam, laborum
quos reiciendis, atque consectetur numquam odit nam asperiores quia veniam
officia unde.</p>
</div>
<div class="card
hover2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Velit dolorum hic in architecto voluptate placeat odio quibusdam, laborum
quos reiciendis, atque consectetur numquam odit nam asperiores quia veniam
officia unde.</p>
</div>
<div
class="card hover3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Velit dolorum hic in architecto voluptate placeat odio quibusdam, laborum
quos reiciendis, atque consectetur numquam odit nam asperiores quia veniam
officia unde.</p>
</div>
</div>
</body>
</html>
|
How to set video in background in homepage using html and css?
cardhover.css
/* container :#293241
shadow:#00184;
card1:#ff1654
card2:#ffba08
card3:#e63946 */
*
{
padding: 00px;
margin: 00px;
}
.container
{
height: 100vh;
width:100%;
background-color:#293241;
display: flex;
justify-content:
space-evenly;
align-items:
center;
}
.container .card
{
height: 250px;
width: 250px;
color:white;
display:flex;
align-items:
center;
justify-content:
center;
box-shadow: 0px
10px 40px #001845;
transition: all
1s;
}
p
{
padding:10px;
}
.container .hover1:hover
{
background-color:#ff1654;
border-radius:
50px;
transform:
scale(1.1);
}
.container .hover2:hover
{
background-color:#ffba08;
border-radius:
50px;
transform:
scale(1.1);
}
.container .hover3:hover
{
background-color:#e63946;
border-radius:
50px;
transform:
scale(1.1);
}
|
0 coment�rios: