Carrusel para mascotas con efecto flotante.

1482 Andev.web

Abrir en el editor Video Publica tu código

Carrusel para mascotas con efecto flotante.

Recomendado

21 August 2025

Contenedor de animación CSS con cuenta regresiva

16 September 2025

Carrusel de tarjetas 3D HTML CSS JavaScript

9 December 2025

Diseño de formulario de inicio de sesión animado con CSS

HTML

<!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');
});

Recomendado

Contenedor de animación CSS con cuenta regresiva

Carrusel de tarjetas 3D HTML CSS JavaScript

Diseño de formulario de inicio de sesión animado con CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS