How to create CSS card 3d hover effect ?
: SOURCE CODE :
HTML SOURCE_CODE:-
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body >
<div class="wrapper">
<div class="container" id="c0">
<div class="image" id="i0">
<div class="city">
</div>
</div>
<div class="story" id="s0">
<div class="info">
<h3>Bronu(The Dog)</h3>
<p> The dog (Canis familiaris when considered
a distinct species or Canis lupus familiaris when considered
a subspecies of the wolf) is a domesticated carnivore of the family Canidae.
It is part of the wolf-like canids,
and is the most widely abundant terrestrial carnivore.</p>
</div>
</div>
</div>
<div class="container" id="c1">
<div class="image" id="i1">
<div class="city">
</div>
</div>
<div class="story" id="s1">
<div class="info">
<h3>Mountain</h3>
<p> A mountain is a large landform that rises above the
surrounding land in a limited area, usually in the form of a peak.
A mountain is generally considered to be steeper than a hill.
Mountains are formed through tectonic forces or volcanism.</p>
</div>
</div>
</div>
<div class="container" id="c2">
<div class="image" id="i2">
<div class="city">
</div>
</div>
<div class="story" id="s2">
<div class="info">
<h3>Camera
</h3>
<p> A camera is an optical instrument used to record images.
At their most basic, cameras are sealed boxes (the camera body)
with a small hole (the aperture) that allow light in to capture an
image on a light-sensitive surface (usually photographic film or
a digital sensor).</p>
</div>
</div>
</div>
<div class="page">
<h4>Hover the card</h4>
<ul><li> <<< </li>
<li> >>> </li>
</ul>
</div>
</div>
</body>
</html>
CSS SOURCE_CODE:-
@import url('https://fonts.googleapis.com/css?family=Raleway:200');
body {
font-family: 'Raleway', sans-serif;
background:rgb(233, 233, 233);
color: #fff;
transition: 1s;
}
.wrapper {
position: absolute;
top: 10%;
left: 40%;
width: 300px;
height: 500px;
perspective: 900px;
}
.container {
position: absolute;
top: 0%;
width: 100%;
height: 100%;
transition: .5s all ease;
transform: rotateX(60deg) scale(0.7);
perspective: 900px;
box-shadow: 0px 20px 50px #555;
animation: entry 1s linear 1;
}
#c0 {
position: absolute;
top: 0%;
width: 100%;
height: 100%;
background-image: url("img/dog-3204497_1920.jpg");
background-size: cover;
z-index: 300;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
#c1 {
background-image: url("img/lorenzo-lamonica-i9QJqSIr4l4-unsplash.jpg");
background-size: cover;
box-shadow: 0 14px 28px rgba(36, 30, 30, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
left: 100%;
z-index: 0;
}
#c2 {
left: -100%;
z-index: 0;
background-image: url("img/liam-shaw-ZGxjCKNEVtY-unsplash.jpg");
background-size: cover;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.container:hover {
cursor: pointer;
transform: rotate(0deg) scale(1) translateY(10px);
transition: .5s all ease;
z-index: 400;
}
.image {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 45%;
}
.story {
position: absolute;
top: 45%;
left: 0%;
height: 0%;
width: 100%;
background: linear-gradient(to bottom, #1f1e1e 0%, #3f3e3d 40%);
z-index: 30;
transition: 0.5s;
}
.container:hover .story{
height: 55%;
opacity: 0.90;
}
#s1 {
background: linear-gradient(to top, #6eb42c 0%, #4f8805 100%);
}
#s2 {
background: linear-gradient(to top, #5d69d8 0%, #7b88d1 120%);
}
.info {
position: relative;
opacity: 0;
top:10%;
overflow: hidden;
z-index: 100;
transition: 1s;
}
.container:hover .info{
opacity: 1;
}
h3 {
text-align: center;
text-shadow: 0px 0px 10px #eee;
color: #eee;
letter-spacing: 2px;
}
h4 {
color: #111;
position: absolute;
top: 30%;
left: 30%;
letter-spacing: 2px;
}
h1 {
color: #111;
position: fixed;
top: 0%;
left: 30%;
letter-spacing: 2px;
}
p {
font-size: 14px;
color: #fff;
padding: 0px 20px 20px 20px;
line-height: 150%;
text-align: center;
letter-spacing: 1px;
}
.page {
position: absolute;
top: 0%;
width: 100%;
left: 0%;
height: 20%;
z-index: 30;
}
li {
position: absolute;
top: 50%;
list-style: none;
color: #111;
}
li:nth-child(1) {
left: 15%;
animation: simple1 1s linear infinite;
}
li:nth-child(2) {
right: 15%;
animation: simple 1s linear infinite;
}
@keyframes simple {
50% {
transform: translateX(10px);
opacity: 0.5;
}
100% {
transform: translateX(10px);
opacity: 0;
}
}
@keyframes simple1 {
50% {
transform: translateX(-10px);
opacity: 0.5;
}
100% {
transform: translateX(-10px);
opacity: 0;
}
}
@keyframes entry {
0% {
top: -20%;
opacity: 0.1;
transition: 1s;
}
100% {
top: 0%;
}
}
Definition and Usage
The :hover selector is used to select elements when you mouse over them.
Tip: The :hover selector can be used on all elements, not only on links.
Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!
Comments
Post a Comment