Author: | Fehrenbach Baptiste |
---|---|
Views Total: | 4,033 views |
Official Page: | Go to website |
Last Update: | October 7, 2020 |
License: | MIT |
Preview:

Description:
A stylish, responsive, cover flow style card carousel implemented in pure CSS and lable+radio tricks.
How to use it:
1. Add images and descriptions to the card carousel.
<div class="slider"> <input type="radio" name="testimonial" id="t-1"> <input type="radio" name="testimonial" id="t-2"> <input type="radio" name="testimonial" id="t-3" checked> <input type="radio" name="testimonial" id="t-4"> <input type="radio" name="testimonial" id="t-5"> <div class="testimonials"> <label class="item" for="t-1"> <img src="1.jpg" alt="picture"> <p>Description 1</p> </label> <label class="item" for="t-2"> <img src="2.jpg" alt="picture"> <p>Description 2</p> </label> <label class="item" for="t-3"> <img src="3.jpg" alt="picture"> <p>Description 3</p> </label> <label class="item" for="t-4"> <img src="4.jpg" alt="picture"> <p>Description 4</p> </label> <label class="item" for="t-5"> <img src="5.jpg" alt="picture"> <p>Description 5</p> </label> </div> <div class="dots"> <label for="t-1"></label> <label for="t-2"></label> <label for="t-3"></label> <label for="t-4"></label> <label for="t-5"></label> </div> </div>
2. The necessary CSS rules for the card carousel.
.slider { width: 100%; } .slider input { display: none; } .testimonials { display: flex; align-items: center; justify-content: center; position: relative; min-height: 350px; perspective: 1000px; overflow: hidden; } .testimonials .item { top: 0; position: absolute; box-sizing: border-box; background-color: #0A0220; padding: 30px; width: 450px; text-align: center; transition: transform 0.4s; -webkit-transform-style: preserve-3d; box-shadow: 0 0 10px rgba(0,0,0,0.3); user-select: none; cursor: pointer; } .testimonials .item img { width: 100px; border-radius: 50%; border: 13px solid #3B344D; } .testimonials .item p { color: #ddd; } .testimonials .item h2 { font-size: 14px; } .dots { display: flex; justify-content: center; align-items: center; } .dots label { display: block; height: 5px; width: 5px; border-radius: 50%; cursor: pointer; background-color: #413B52; margin: 7px; transition: transform 0.2s, color 0.2s; } /* First */ #t-1:checked ~ .dots label[for="t-1"] { transform: scale(2); background-color: #fff; } #t-1:checked ~ .dots label[for="t-2"] { transform: scale(1.5); } #t-1:checked ~ .testimonials label[for="t-1"] { z-index: 4; } #t-1:checked ~ .testimonials label[for="t-2"] { transform: translateX(300px) translateZ(-90px) rotateY(-15deg); z-index: 3; } #t-1:checked ~ .testimonials label[for="t-3"] { transform: translateX(600px) translateZ(-180px) rotateY(-25deg); z-index: 2; } #t-1:checked ~ .testimonials label[for="t-4"] { transform: translateX(900px) translateZ(-270px) rotateY(-35deg); z-index: 1; } #t-1:checked ~ .testimonials label[for="t-5"] { transform: translateX(1200px) translateZ(-360px) rotateY(-45deg); } /* Second */ #t-2:checked ~ .dots label[for="t-1"] { transform: scale(1.5); } #t-2:checked ~ .dots label[for="t-2"] { transform: scale(2); background-color: #fff; } #t-2:checked ~ .dots label[for="t-3"] { transform: scale(1.5); } #t-2:checked ~ .testimonials label[for="t-1"] { transform: translateX(-300px) translateZ(-90px) rotateY(15deg); } #t-2:checked ~ .testimonials label[for="t-2"] { z-index: 3; } #t-2:checked ~ .testimonials label[for="t-3"] { transform: translateX(300px) translateZ(-90px) rotateY(-15deg); z-index: 2; } #t-2:checked ~ .testimonials label[for="t-4"] { transform: translateX(600px) translateZ(-180px) rotateY(-25deg); z-index: 1; } #t-2:checked ~ .testimonials label[for="t-5"] { transform: translateX(900px) translateZ(-270px) rotateY(-35deg); } /* Third */ #t-3:checked ~ .dots label[for="t-2"] { transform: scale(1.5); } #t-3:checked ~ .dots label[for="t-3"] { transform: scale(2); background-color: #fff; } #t-3:checked ~ .dots label[for="t-4"] { transform: scale(1.5); } #t-3:checked ~ .testimonials label[for="t-1"] { transform: translateX(-600px) translateZ(-180px) rotateY(25deg); } #t-3:checked ~ .testimonials label[for="t-2"] { transform: translateX(-300px) translateZ(-90px) rotateY(15deg); } #t-3:checked ~ .testimonials label[for="t-3"] { z-index: 3; } #t-3:checked ~ .testimonials label[for="t-4"] { transform: translateX(300px) translateZ(-90px) rotateY(-15deg); z-index: 2; } #t-3:checked ~ .testimonials label[for="t-5"] { transform: translateX(600px) translateZ(-180px) rotateY(-25deg); } /* Fourth */ #t-4:checked ~ .dots label[for="t-3"] { transform: scale(1.5); } #t-4:checked ~ .dots label[for="t-4"] { transform: scale(2); background-color: #fff; } #t-4:checked ~ .dots label[for="t-5"] { transform: scale(1.5); } #t-4:checked ~ .testimonials label[for="t-1"] { transform: translateX(-900px) translateZ(-270px) rotateY(35deg); } #t-4:checked ~ .testimonials label[for="t-2"] { transform: translateX(-600px) translateZ(-180px) rotateY(25deg); } #t-4:checked ~ .testimonials label[for="t-3"] { transform: translateX(-300px) translateZ(-90px) rotateY(15deg); z-index: 2; } #t-4:checked ~ .testimonials label[for="t-4"] { z-index: 3; } #t-4:checked ~ .testimonials label[for="t-5"] { transform: translateX(300px) translateZ(-90px) rotateY(-15deg); } /* Fifth */ #t-5:checked ~ .dots label[for="t-4"] { transform: scale(1.5); } #t-5:checked ~ .dots label[for="t-5"] { transform: scale(2); background-color: #fff; } #t-5:checked ~ .testimonials label[for="t-1"] { transform: translateX(-1200px) translateZ(-360px) rotateY(45deg); } #t-5:checked ~ .testimonials label[for="t-2"] { transform: translateX(-900px) translateZ(-270px) rotateY(35deg); z-index: 1; } #t-5:checked ~ .testimonials label[for="t-3"] { transform: translateX(-600px) translateZ(-180px) rotateY(25deg); z-index: 2; } #t-5:checked ~ .testimonials label[for="t-4"] { transform: translateX(-300px) translateZ(-90px) rotateY(15deg); z-index: 3; } #t-5:checked ~ .testimonials label[for="t-5"] { z-index: 4; }