Pet carousel with floating effect

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="carousel">
  <div class="carousel__item carousel__item--left">
    <img src="https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?q=80&w=3388&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Buddy</h3>
      <p> Friendly, loyal, playful</p>
    </div>
  </div>
  <div class="carousel__item carousel__item--main">
    <img src="https://images.unsplash.com/photo-1552053831-71594a27632d?q=80&w=3362&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Max</h3>
      <p>Energetic, brave, strong</p>
    </div>
  </div>
  <div class="carousel__item carousel__item--right">
    <img src="https://images.unsplash.com/photo-1537151625747-768eb6cf92b2?q=80&w=2568&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Bella</h3>
      <p>Sweet, gentle, loving</p>
    </div>
  </div>
  <div class="carousel__item">
    <img src="https://images.unsplash.com/photo-1588943211346-0908a1fb0b01?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Charlie</h3>
      <p>Cheerful, affectionate, lively</p>
    </div>
  </div>
  <div class="carousel__item">
    <img src="https://images.unsplash.com/photo-1596492784531-6e6eb5ea9993?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Rocky</h3>
      <p>Tough, adventurous, spirited</p>
    </div>
  </div>
  <div class="carousel__item">
    <img src="https://images.unsplash.com/photo-1510771463146-e89e6e86560e?q=80&w=1362&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="dog">
    <div class="carousel__text">
      <h3>Luna</h3>
      <p> Curious, smart, elegant</p>
    </div>
  </div>
  <div class="carousel__btns">
    <button class="carousel__btn" id="leftBtn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="m15 4l2 2l-6 6l6 6l-2 2l-8-8z"/></svg></button>
    <button class="carousel__btn" id="rightBtn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="m9.005 4l8 8l-8 8L7 18l6.005-6L7 6z"/></svg></button>
  </div>
</div>

</body>
</html>

CSS

*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    font-family: 'Montserrat', sans-serif;
}
html {
    font-size: 62.5%;
}
body {
    box-sizing: border-box;
    font-size: 1.6rem;
    background-color: rgb(24, 27, 30);
    color: #fff;
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.carousel {
    position: relative;
}
.carousel__item {
    position: relative;
    height: 35rem;
    width: 25rem;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1rem 4rem rgba(0,0,0,.5);
    position: absolute;
    transform: translate(-50%,-50%) scale(.1);
    z-index: 0;
    transition: all .2s linear;
}
.carousel__item img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.carousel__item--main {
    transform: translate(-50%,-50%) scale(1);
    z-index: 2;
    cursor: pointer;
}

.carousel__item--left {
    transform: translate(-110%,-50%) scale(.9);
    z-index: 1;
}
.carousel__item--right {
    transform: translate(10%,-50%) scale(.9);
    z-index: 1;
}
.carousel__item--left img, .carousel__item--right img {
    filter: grayscale(80%);
}

.carousel__item--right:hover {
    transform: translate(10%,-50%) scale(1.2);
    z-index: 3;
    cursor: pointer;
}
.carousel__item--left:hover {
    transform: translate(-110%,-50%) scale(1.2);
    z-index: 3;
    cursor: pointer;
}
.carousel__item--main:hover {
    transform: translate(-50%,-50%) scale(1.2);
}
.carousel__item:hover > .carousel__text {
    opacity: 1;
}
.carousel__item:hover img {
    filter: grayscale(0%);
}

.carousel__text {
    position: absolute;
    bottom: 0;
    z-index: 4;
    opacity: 0;
    transition: opacity .2s;
    width: 100%;
    text-align: center;
    background-color: rgba(0,0,0,.5);
    padding: 2rem 1rem;
    color: #fff;
}

.carousel__btns {
    position: absolute;
    transform: translate(-50%, 22rem);
    display: flex;
    gap: 2rem;
}
.carousel__btn {
    background-color: transparent;
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    border:1px solid currentColor;
    color: #fff;
    cursor: pointer;
}
.carousel__btn svg {
    height: 1.8rem;
    width: 1.8rem;
}
.carousel__btn:hover {
    color: #aaa;
}

JS

'use strict';

const carouselItems = document.querySelectorAll('.carousel__item');
console.log(carouselItems)
let currentItem = document.querySelector('.carousel__item--main');
const leftBtn = document.querySelector('#leftBtn');
const rightBtn = document.querySelector('#rightBtn');

rightBtn.addEventListener('click', function() {
    currentItem = document.querySelector('.carousel__item--right');
    const leftItem = document.querySelector('.carousel__item--main');
    carouselItems.forEach((item,i) => {
        item.classList = 'carousel__item';
    });
    currentItem.classList.add('carousel__item--main');
    leftItem.classList.add('carousel__item--left');
    const currentId = Array.from(carouselItems).indexOf(currentItem);
    const rightItem = currentId === carouselItems.length -1 ? carouselItems[0] : carouselItems[currentId +1];
    rightItem.classList.add('carousel__item--right');
});

leftBtn.addEventListener('click', function() {
    currentItem = document.querySelector('.carousel__item--left');
    const rightItem = document.querySelector('.carousel__item--main');
    carouselItems.forEach((item,i) => {
        item.classList = 'carousel__item';
    });
    currentItem.classList.add('carousel__item--main');
    rightItem.classList.add('carousel__item--right');
    const currentId = Array.from(carouselItems).indexOf(currentItem);
    const leftItem = currentId === 0 ? carouselItems[carouselItems.length-1] : carouselItems[currentId-1];
    leftItem.classList.add('carousel__item--left');
});

Pet carousel with floating effect

Recommended

CSS Loading Animation Snippet

CSS Loading Animation Snippet

floating infinite

HTML

CSS

JS

Recommended

CSS Loading Animation Snippet

CSS Loading Animation Snippet

floating infinite

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS