3D Card Effect on hover using Html and CSS | 3D Cards only in HTML and CSS (2020)

In this CSS Tutorial, I have created a 3d effect card with HTML and CSS on hover.

3D Card Effect on hover using Html and CSS | 3D Cards only in HTML and CSS (2020) | 3D Cards in css

In this CSS Tutorial, I have created a 3d effect card with HTML and CSS on hover. Learn how to create a 3d card rotate effect. Apply it to profile cards / User cards to enhance interactivity | Learn How To Make 3D Flip Card In HTML And CSS, Flip card Design Tutorial using HTML and CSS.

Step by step Tutorial:

HTML:

                            
                                <!DOCTYPE html>
<html>
<head> 
 </head>
<body>
<h1> 3 World places to visit 2021 year</h1>
<div class="wrapper">

	<div class="container" id="card1">
		<div class="image">
					
		<img src="data:image/jpeg;base64,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" width="100%" height="100%">
	
		</div>
		<div class="story" id="story1">
			<div class="info">
			<h3>Pyramids</h3>
			<p> Built during a time when Egypt was one of the richest and most powerful civilizations in the world. 
Their massive scale reflects the unique role that the pharaoh played in ancient Egyptian society.</p>
			</div>
		</div>
	</div>

	<div class="container" id="card2">
		<div class="image">

				<img src="https://whc.unesco.org/uploads/thumbs/site_0373_0001-750-750-20151104125603.jpg" width="100%" height="100%">

		</div>
		<div class="story" id="story2">
			<div class="info">
				<h3>Stonehenge</h3>
			<p> Stonehenge is a prehistoric monument in Wiltshire, England. It was constructed in several 
stages between 3000 and 1500 B.C., spanninng to the Bronze Age.</p>
			</div>
		</div>
	</div>
	<div class="container" id="card3">
		<div class="image">
		
		    <img src="https://travelmamas.com/wp-content/uploads/2020/10/leaning_tower_of_pisa_square-scaled.jpg" width="100%" height="100%">

		</div>
		<div class="story" id="story3">
			<div class="info">
			<h3>Tower of Pisa</h3>
			<p> The Leaning Tower of Pisa or simply the Tower of Pisa is the campanile, or freestanding bell tower, 
of the cathedral of the Italian city of Pisa, known worldwide for its unintended tilt</p>

			</div>
		</div>
	</div>


</div>
</body>
</html>

CSS

                            
                                @import url("https://fonts.googleapis.com/css?family=Raleway:200");

/*Styling for cards*/

body {
  font-family: "Raleway", sans-serif;
  background: #eee;
}
h1 {
  color: #111;
  text-align: center;
  margin-top: 25px;
  letter-spacing: 2px;
}

.wrapper {
  position: absolute;
  top: 10%;
  left: 40%;
  width: 300px;
  height: 500px;
  perspective: 900px;
}

.container {
  position: absolute;
  top: 0%;
  width: 100%;
  height: 100%;
  transition: 0.4s all ease;
  transform: rotateX(60deg) scale(0.7);
   box-shadow: 0px 20px 50px #555;
  animation: entry 1s linear 1;
}
@keyframes entry {
  0% {
    top: -20%;
    opacity: 0.1;
  }
  100% {
    top: 0%;
  }
}

.container:hover {
  cursor: pointer;
  transform: rotate(0deg) scale(1) translateY(10px);
  transition: 0.5s all ease;
  perspective: 900;
  z-index: 99;
}

#card1 {
  background: linear-gradient(to bottom, #eba65b 30%, #d99267 100%);
  z-index: 300;
}

#card2 {
  background: linear-gradient(to bottom, #59476f 30%, #7b88d1 100%);
  box-shadow: 0px 20px 100px #555;
  left: 100%;
  z-index: 0;
}

#card3 {
  left: -100%;
  z-index: 0;
  background: linear-gradient(to bottom, #59476f 30%, #7b88d1 100%);
  box-shadow: 0px 20px 100px #555;
}

.image {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 45%;
}

.story {
  position: absolute;
  top: 45%;
  left: 0%;
  height: 55%;
  width: 100%;
  z-index: 30;
}

#story1{
  background: linear-gradient(to bottom, #eba65b 0%, #d99267 40%);
}
#story2 {
  background: linear-gradient(to top, #5b62a2 0%, #7b88d1 100%);
}
#story3 {
  background: linear-gradient(to top, #5b62a2 0%, #7b88d1 120%);
}

.info {
  position: absolute;
  top: 10%;
}

h3 {
  text-align: center;
  text-shadow: 0px 0px 10px #eee;
  color: #eee;
  letter-spacing: 2px;
}

p {
  font-size: 14px;
  color: #fff;
  padding: 0px 20px 20px 20px;
  line-height: 150%;
  text-align: center;
  letter-spacing: 1px;
}

Download Code Files