You are currently viewing Carousel Card Using HTML and CSS only

Carousel Card Using HTML and CSS only

Carousel Card Using HTML and CSS only

Carousel Card Using HTML and CSS only
Carousel Card Using HTML and CSS only

 

Welcome to Code With Random blog. In this blog, we learn how to create a Carousel Project. We use HTML and CSS  for Card Carousel.

Hope you enjoy our blog so let’s start with a basic HTML Structure for the Carousel.

HTML Code For Carousel

Table of Contents

<div class="container-3D">
<input type="radio" id="swap-left-front" name="swapper" value="swap-left">
<input type="radio" id="swap-right-front" name="swapper" value="swap-right">
<input type="radio" id="swap-up-front" name="swapper" value="swap-up">
<input type="radio" id="swap-down-front" name="swapper" value="swap-down">
<input type="radio" id="swap-left-back" name="swapper" value="swap-left">
<input type="radio" id="swap-right-back" name="swapper" value="swap-right">
<input type="radio" id="swap-up-back" name="swapper" value="swap-up">
<input type="radio" id="swap-down-back" name="swapper" value="swap-down">
<input type="radio" id="swap-left-top" name="swapper" value="swap-left">
<input type="radio" id="swap-right-top" name="swapper" value="swap-right">
<input type="radio" id="swap-up-top" name="swapper" value="swap-up">
<input type="radio" id="swap-down-top" name="swapper" value="swap-down">
<input type="radio" id="swap-left-bottom" name="swapper" value="swap-left">
<input type="radio" id="swap-right-bottom" name="swapper" value="swap-right">
<input type="radio" id="swap-up-bottom" name="swapper" value="swap-up">
<input type="radio" id="swap-down-bottom" name="swapper" value="swap-down">
<input type="radio" id="swap-left-left" name="swapper" value="swap-left">
<input type="radio" id="swap-right-left" name="swapper" value="swap-right">
<input type="radio" id="swap-up-left" name="swapper" value="swap-up">
<input type="radio" id="swap-down-left" name="swapper" value="swap-down">
<input type="radio" id="swap-left-right" name="swapper" value="swap-left">
<input type="radio" id="swap-right-right" name="swapper" value="swap-right">
<input type="radio" id="swap-up-right" name="swapper" value="swap-up">
<input type="radio" id="swap-down-right" name="swapper" value="swap-down">
<div class="flopper">
<figure class="back">
<label for="swap-left-back">&#8592;</label>
<label for="swap-right-back">&#8594;</label>
<label for="swap-up-back">&#8593;</label>
<label for="swap-down-back">&#8595;</label>
<div></div>
<h2>Palace</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript:void(0);" title="Learn More">Learn More</a>
</figure>
<figure class="top">
<label for="swap-left-top">&#8592;</label>
<label for="swap-right-top">&#8594;</label>
<label for="swap-up-top">&#8593;</label>
<label for="swap-down-top">&#8595;</label>
<div></div>
<h2>Tools</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript:void(0);" title="Learn More">Learn More</a>
</figure>
<figure class="bottom">
<label for="swap-left-bottom">&#8592;</label>
<label for="swap-right-bottom">&#8594;</label>
<label for="swap-up-bottom">&#8593;</label>
<label for="swap-down-bottom">&#8595;</label>
<div></div>
<h2>Clouds</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript:void(0);" title="Learn More">Learn More</a>
</figure>
<figure class="left">
<label for="swap-left-left">&#8592;</label>
<label for="swap-right-left">&#8594;</label>
<label for="swap-up-left">&#8593;</label>
<label for="swap-down-left">&#8595;</label>
<div></div>
<h2>Birds</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript:void(0);" title="Learn More">Learn More</a>
</figure>
<figure class="right">
<label for="swap-left-right">&#8592;</label>
<label for="swap-right-right">&#8594;</label>
<label for="swap-up-right">&#8593;</label>
<label for="swap-down-right">&#8595;</label>
<div></div>
<h2>Concert</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript:void(0);" title="Learn More">Learn More</a>
</figure>
<figure class="front">
<label for="swap-left-front">&#8592;</label>
<label for="swap-right-front">&#8594;</label>
<label for="swap-up-front">&#8593;</label>
<label for="swap-down-front">&#8595;</label>
<div></div>
<h2>Big Water</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript:void(0);" title="Learn More">Learn More</a>
</figure>
</div>
</div>

There is all Html Code for the Carousel. Now, you can see output without Css, then we write Css for the Carousel.

50+ Html ,Css & Javascript Projects With Source Code

Only Html Code Output

Carousel Card Using HTML and CSS only
Carousel Card Using HTML and CSS only

CSS Code For Carousel

 *,
*::before,
*::after {
box-sizing: border-box;
font-family: "Poppins", sans-serif;
transform-style: preserve-3d;
}
body,
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 12pt;
line-height: 18pt;
font-weight: 400;
color: white;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #444;
margin: 0;
}
.container-3D {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
}
.flopper {
position: relative;
width: auto;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: visible;
transition: all 0.5s ease-in-out;
/*animation: rotate 6s linear infinite;*/
}
figure {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
width: 300px;
height: 300px;
transform-origin: 50% 50%;
padding: 20px 25px;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
border: 1px solid white;
}
figure div {
width: 100%;
height: 100px;
background: url("https://picsum.photos/id/237/1280/720");
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.front div {
background: url("https://picsum.photos/id/404/1280/720");
}
.left div {
background: url("https://picsum.photos/id/611/1280/720");
}
.right div {
background: url("https://picsum.photos/id/117/1280/720");
}
.back div {
background: url("https://picsum.photos/id/142/1280/720");
}
.bottom div {
background: url("https://picsum.photos/id/888/1280/720");
}
.top div {
background: url("https://picsum.photos/id/491/1280/720");
}
figure h2 {
font-size: 20pt;
line-height: 20pt;
margin: 20px 0px 10px 0px;
}
figure p {
font-size: 12pt;
line-height: 18pt;
margin: 0 0 15px 0;
text-align: center;
}
figure a {
position: relative;
width: 130px;
height: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: white;
color: black;
text-decoration: none;
z-index: 1;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
figure a::after {
position: absolute;
content: "";
bottom: 100%;
left: 0;
width: 100%;
height: 100%;
background: black;
z-index: -1;
transition: all 0.3s ease-in-out;
}
figure a:hover::after {
bottom: 0;
transition: all 0.3s ease-in-out;
}
figure a:hover {
color: white;
transition: all 0.3s ease-in-out;
}
.front {
transform: translateZ(150px);
background: #1be7ff;
--face_color: #1be7ff;
}
.back {
transform: rotateY(180deg) translateZ(150px);
background: #6eeb83;
--face_color: #6eeb83;
}
.top {
transform: rotateX(90deg) translateZ(150px);
background: #e4ff1a;
--face_color: #e4ff1a;
}
.bottom {
transform: rotateX(-90deg) translateZ(150px);
background: #e8aa14;
--face_color: #e8aa14;
}
.left {
transform: rotateY(-90deg) translateZ(150px);
background: #ff5714;
--face_color: #ff5714;
}
.right {
transform: rotateY(90deg) translateZ(150px);
background: black;
--face_color: black;
}
.front h2,
.front p,
.back h2,
.back p,
.top h2,
.top p,
.bottom h2,
.bottom p {
color: black;
}
.front a,
.back a,
.top a,
.bottom a {
background: black;
color: white;
}
.front a::after,
.back a::after,
.top a::after,
.bottom a::after {
background: white;
}
.front a:hover,
.back a:hover,
.top a:hover,
.bottom a:hover {
color: black;
}
label {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--face_color);
color: black;
font-size: 14pt;
margin: 0;
padding: 0;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
label:hover {
cursor: pointer;
}
label:nth-child(1) {
left: -55px;
padding-bottom: 5px;
}
label:nth-child(2) {
right: -55px;
padding-bottom: 5px;
}
label:nth-child(3) {
top: -55px;
}
label:nth-child(4) {
bottom: -55px;
}
.right label {
color: white;
}
.left label {
color: white;
}
#swap-left-front:checked ~ .flopper {
transform: rotateY(90deg);
transition: all 0.5s ease-in-out;
}
#swap-right-front:checked ~ .flopper {
transform: rotateY(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-up-front:checked ~ .flopper {
transform: rotateX(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-down-front:checked ~ .flopper {
transform: rotateX(90deg);
transition: all 0.5s ease-in-out;
}
#swap-left-back:checked ~ .flopper {
transform: rotateY(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-right-back:checked ~ .flopper {
transform: rotateY(-270deg);
transition: all 0.5s ease-in-out;
}
#swap-up-back:checked ~ .flopper {
transform: rotateX(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-down-back:checked ~ .flopper {
transform: rotateX(90deg);
transition: all 0.5s ease-in-out;
}
#swap-left-top:checked ~ .flopper {
transform: rotateY(90deg);
transition: all 0.5s ease-in-out;
}
#swap-right-top:checked ~ .flopper {
transform: rotateY(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-up-top:checked ~ .flopper {
transform: rotateY(-180deg);
transition: all 0.5s ease-in-out;
}
#swap-down-top:checked ~ .flopper {
transform: rotateX(0deg);
transition: all 0.5s ease-in-out;
}
#swap-left-bottom:checked ~ .flopper {
transform: rotateY(90deg);
transition: all 0.5s ease-in-out;
}
#swap-right-bottom:checked ~ .flopper {
transform: rotateY(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-up-bottom:checked ~ .flopper {
transform: rotateX(0deg);
transition: all 0.5s ease-in-out;
}
#swap-down-bottom:checked ~ .flopper {
transform: rotateY(180deg);
transition: all 0.5s ease-in-out;
}
#swap-left-left:checked ~ .flopper {
transform: rotateY(180deg);
transition: all 0.5s ease-in-out;
}
#swap-right-left:checked ~ .flopper {
transform: rotateY(-360deg);
transition: all 0.5s ease-in-out;
}
#swap-up-left:checked ~ .flopper {
transform: rotateX(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-down-left:checked ~ .flopper {
transform: rotateX(90deg);
transition: all 0.5s ease-in-out;
}
#swap-left-right:checked ~ .flopper {
transform: rotateY(0deg);
transition: all 0.5s ease-in-out;
}
#swap-right-right:checked ~ .flopper {
transform: rotateY(-180deg);
transition: all 0.5s ease-in-out;
}
#swap-up-right:checked ~ .flopper {
transform: rotateX(-90deg);
transition: all 0.5s ease-in-out;
}
#swap-down-right:checked ~ .flopper {
transform: rotateX(90deg);
transition: all 0.5s ease-in-out;
}
input {
display: none;
}
@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg);
}
50% {
transform: rotateY(180deg) rotateX(30deg);
}
100% {
transform: rotateY(360deg) rotateX(0deg);
}
}
@media (max-height: 435px), @media (max-width: 435px) {
figure {
width: 250px;
height: 250px;
}
.front {
transform: translateZ(125px);
}
.back {
transform: rotateY(180deg) translateZ(125px);
}
.top {
transform: rotateX(90deg) translateZ(125px);
}
.bottom {
transform: rotateX(-90deg) translateZ(125px);
}
.left {
transform: rotateY(-90deg) translateZ(125px);
}
.right {
transform: rotateY(90deg) translateZ(125px);
}
figure div {
height: 80px;
}
figure h2 {
font-size: 18pt;
line-height: 18pt;
}
figure p {
font-size: 11pt;
line-height: 15pt;
}
figure a {
height: 60px;
}
label {
width: 30px;
height: 30px;
font-size: 12pt;
}
label:nth-child(1) {
left: -40px;
}
label:nth-child(2) {
right: -40px;
}
label:nth-child(3) {
top: -40px;
}
label:nth-child(4) {
bottom: -40px;
}
}

Now we have completed our Carousel Card Project. Here is our updated output With Html and Css.

Final Output Of Carousel Card Using HTML and CSS only 

Carousel Card Using HTML and CSS only
Carousel Card Using HTML and CSS only

 

Carousel Card Using HTML and CSS only
Carousel Card Using HTML and CSS only

 

Live Preview Of Carousel Card Using HTML and CSS only 

Restaurant Website Using HTML And CSS With Source Code

Now we have completed our Carousel.  Here is our updated output with Css. I hope you like the Carousel, you can see output project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you>>!

In this post, we learn how to create a Carousel Card Using HTML and CSS only. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Written by – Code With Random/Anki 

code by – @TheMOZZARELLA

Leave a Reply