Welcome, fellow coders! Are you ready to take your front-end development skills to the next level? In this tutorial, we’ll show you how to create visually stunning Travel Service Cards using HTML and CSS. But that’s not all – we’ll also add a rotation effect that will take your design to new heights. By the end of this tutorial, you’ll have a powerful tool in your web development arsenal and the know-how to apply this effect to your own projects. So, let’s dive in and get started!
Before we start here are some more articles you might like to read-
- Gallery hover effect using HTML and CSS
- Text with hover effect using pure css
- Team Profile with hover effect using HTML and CSS
- Cards with hover effect using HTML and CSS
- Ying & Yang Cats with hover effect using HTML and CSS
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Travel Service Cards with Rotation Effect using HTML & CSS - Coding Torque</title>
</head>
<body>
<!-- Further code here -->
<script src="script.js"></script>
</body>
</html>Paste the below code in your <body> tag.
<div class="container">
<div class="panel">
<div class="ring">
<div class="card card1"></div>
<div class="border">
<p class="title">Brazil</p>
<div class="slide">
<h6 class="para">Latest Deals from Heathrow</h6>
<div class="line">
<h6 class="para">OUT</h6> <i class="fa fa-plane" aria-hidden="true"></i>
<h6 class="para">£849</h6>
</div>
<div class="line">
<h6 class="para">RTN</h6> <i class="fa fa-plane" aria-hidden="true"></i>
<h6 class="para">£659</h6>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="ring">
<div class="card card2"></div>
<div class="border">
<p class="title">Belize</p>
<div class="slide">
<h6 class="para">Latest Deals from Heathrow</h6>
<div class="line">
<h6 class="para">OUT</h6> <i class="fa fa-plane" aria-hidden="true"></i>
<h6 class="para">£999</h6>
</div>
<div class="line">
<h6 class="para">RTN</h6> <i class="fa fa-plane" aria-hidden="true"></i>
<h6 class="para">£745</h6>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="ring">
<div class="card card3"></div>
<div class="border">
<p class="title">Egypt</p>
<div class="slide">
<h6 class="para">Latest Deals from Heathrow</h6>
<div class="line">
<h6 class="para">OUT</h6> <i class="fa fa-plane" aria-hidden="true"></i>
<h6 class="para">£399</h6>
</div>
<div class="line">
<h6 class="para">RTN</h6> <i class="fa fa-plane" aria-hidden="true"></i>
<h6 class="para">£257</h6>
</div>
</div>
</div>
</div>
</div>
</div>CSS Code
Create a file style.css and paste the code below.
body {
margin: 0;
background-color: #2e2e31;
display: flex;
align-items: center;
height: 100vh;
width: 100vw;
}
.container {
height: 100vh;
width: 100vw;
max-height: 600px;
max-width: 1200px;
min-height: 600px;
min-width: 1100px;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
}
.panel {
height: 270px;
width: 190px;
position: relative;
&:hover {
.card {
filter: blur(1.5px);
}
.card1 {
background-size: 215% 135%;
}
.card2 {
background-size: 115% 115%;
}
.card3 {
background-size: 155% 115%;
}
.title {
color: rgba(255, 255, 255, 0.2);
}
.border {
border: 1px solid rgba(255, 255, 255, 1);
}
.slide {
bottom: 0px;
}
.ring:before,
.ring:after {
transform: translateX(-50%) translateY(-50%) rotate(310deg);
}
}
}
.ring,
.card,
.border,
.slide,
.line {
display: flex;
justify-content: center;
align-items: center;
}
.ring {
color: #fffbf1;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 170px;
}
.card {
background: #f0ead6;
position: relative;
transition: all 1s;
height: 270px;
width: 190px;
border: 1px solid rgba(255, 255, 255, 1);
}
.card1 {
background-image: url("https://assets.codepen.io/489403/brazil.jpg");
background-repeat: no-repeat;
background-size: 200% 120%;
}
.card2 {
background-image: url("https://assets.codepen.io/489403/belize.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.card3 {
background-image: url("https://assets.codepen.io/489403/egypt.jpg");
background-repeat: no-repeat;
background-size: 140% 100%;
}
.ring:before,
.ring:after {
content: "";
padding: 0.7em 0.4em;
position: absolute;
left: 50%;
width: 115%;
top: 50%;
display: block;
border: 5px solid #50c9c3;
border-radius: 50%;
transition: transform 1s;
transform: translateX(-50%) translateY(-50%) rotate(50deg);
}
.ring:before {
border-color: rgb(235, 235, 235) rgb(235, 235, 235) rgba(0, 0, 0, 0)
rgba(0, 0, 0, 0);
z-index: -1;
}
.ring:after {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(235, 235, 235)
rgb(235, 235, 235);
}
p {
text-align: center;
position: absolute;
font-family: "Playfair Display";
}
.title {
font-size: 36px;
font-weight: 700;
transition: all 1s;
top: 0;
}
.para {
bottom: 0;
font-size: 16px;
font-family: "Raleway";
padding: 20px;
margin: 0;
text-align: center;
}
.border {
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.5);
height: 260px;
width: 180px;
transition: border 1s;
overflow: hidden;
}
.slide {
height: 260px;
width: 180px;
position: absolute;
border: 1px solid black;
bottom: -270px;
background: rgba(0, 0, 0, 0.5);
transition: bottom 1s;
flex-direction: column;
}
.fa-plane {
font-size: 16px;
}Output Till Now
Written by: Piyush Patil
Code Credits: @petegarvin1
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
