hover card html css || 3d hover card css || card hover effects html css
Hi, thanks for watching our video about hover card html css || 3d hover card css || card hover effects html css !
In this video we’ll walk you through:
* Hover card effects
* 3D animation card effects
* Different method
ABOUT OUR CHANNEL Our channel is about coding. We cover lots of cool stuff such as "HTML", "CSS", "BOOTSRAP 5", and "JavaScript"...
Check out our channel here:
/ @skillbeginner Don’t forget to subscribe!
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Card hover effects</title>
</head>
<body>
<div class="title">
<h1>Tourist Attractions</h1>
</div>
<!-- card one -->
<div class="card1">
<img src="http://www.pngmart.com/files/5/Pyramids-PNG-HD.png
" alt="">
<h3>Pyramids</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Enim veniam cum odit dolores facilis quas, nobis reiciendis
maxime hic distinctio voluptatem non pariatur eveniet illum
sit aliquam...</p>
</div>
<!-- card two -->
<div class="card2">
<img src="https://wallazee.global.ssl.fastly.net/images
/dynamic/items/383-1024.png" alt="">
<h3>Statue of Liberty</h3>
<p>The Statue of Liberty is a colossal neoclassical
sculpture on Liberty Island in New York Harbor in New
York City, in the United States.</p>
</div>
<!-- card three -->
<div class="card3">
<img src="http://pluspng.com/img-png/download-taj-mahal-
png-images-transparent-gallery-advertisement-1185.png"
alt="">
<h3>Taj Mahal</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Enim veniam cum odit dolores facilis quas, nobis reiciendis
maxime hic distinctio voluptatem non pariatur eveniet illum
sit aliquam...</p>
</div>
</body>
</html>
CSS
@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;
font-family: 'Exo', sans-serif;
}
/* card 1 */
.card1
{
text-align: center;
position: absolute;
left: 100px;
width: 250px;
height: 350px;
margin-top: 10px;
margin-bottom: 10px;
background: linear-gradient(rgb(255,150,58),
rgb(277,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(0);
transition: .6s;
box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}
.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;
text-align: center;
width: 220px;
transform: translateX(12px);
}
/* card 2 */
.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;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.card2 img
{
transform: translateY(15px);
width:180px;
height:150px;
}
/* card 3 */
.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;
box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}
.card3 img
{
transform: translateY(15px);
width: 200px;
height: 120px;
}
Just copy it on your project
And Don't forget to Subscribe To my youtube channel link
Subscribe me
Tags:
cards
