Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips

Gallery & Media

Carousel, lightbox, zoom, before/after comparison and marquee.

How to create modern galleries and sliders? These 36 carousel components cover all needs: responsive slider, infinite carousel, masonry grid, lightbox, marquee and galleries with thumbnails. Each carousel is touch-friendly, accessible and optimized for performance.

Basic Slider

Simple horizontal slider with navigation arrows.

CSS Transform Arrows

Fade Slider

Fade transition between slides.

CSS Opacity Fade

Auto-play Slider

Auto-scrolling with progress bar.

JS Timer Progress

Dots Navigation

Circular dot indicator navigation.

CSS Dots Click
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

Thumbnail Slider

Thumbnail navigation below the main slider.

JS Thumbnails Gallery

Vertical Slider

Defilement vertical haut/bas.

CSS Vertical Y-axis

Parallax Slider

Parallax effect on slide backgrounds.

CSS Parallax Depth

Infinite Loop

Infinite scrolling with no visible end.

JS Infinite Touch

Basic Lightbox

Click on an image to open it in a modal with fade effect.

JS Modal Fade

Lightbox with Navigation

Previous/next arrows and keyboard navigation.

JS Navigation Keyboard

Zoom Lightbox

The image enlarges from its thumbnail position.

JS Zoom Transform

Lightbox with Thumbnails

Thumbnail strip at the bottom of the lightbox.

JS Thumbnails Strip

Fullscreen Lightbox

True fullscreen mode, Escape to close.

JS Fullscreen Immersive

Lightbox with Caption

Animated caption that appears below the image.

JS Caption Animated
Hover Me

Hover Zoom

The image zooms in on hover within its container.

CSS Transform
Move Mouse

Magnifying Glass

Circular magnifier that follows the cursor.

JS Background
Move Mouse

Lens Zoom

Square magnifier that enlarges the area under the cursor.

JS Clip-path
Pan Around

Pan Zoom

Move mouse to explore the zoomed image.

JS Transform-origin
Click Me
Click to zoom

Click to Zoom

Click to alternate between normal and zoomed view.

JS Toggle
Hover

Zoom with Overlay

Zoomed view in a separate panel.

JS Overlay
Product View

Product Zoom

E-commerce style with thumbnails and hover.

JS E-commerce
Ken Burns
Auto-animating

Smooth Ken Burns

Slow zoom animation with continuous panning.

CSS Animation
Welcome to Effect.Labs Premium Web Effects Modern CSS Animations Infinite Scrolling
Welcome to Effect.Labs Premium Web Effects Modern CSS Animations Infinite Scrolling

Basic Marquee

Defilement horizontal simple et fluide.

CSS Minimal
Scrolling Right Reverse Direction Opposite Flow Creative Motion
Scrolling Right Reverse Direction Opposite Flow Creative Motion

Reverse Marquee

Text scrolling in the opposite direction.

CSS Reverse
Latest News Breaking Updates New Features Special Offers
Latest News Breaking Updates New Features Special Offers

Vertical Marquee

Vertical scrolling for announcements.

CSS Vertical
Image 1
Image 2
Image 3
Image 4
Image 5
Image 1
Image 2
Image 3
Image 4
Image 5

Image Marquee

Images defilantes horizontalement.

CSS Images
RAPIDE
Fast Speed Quick Motion Rapid Flow
Fast Speed Quick Motion Rapid Flow
LENT
Slow Speed Gentle Motion Calm Flow
Slow Speed Gentle Motion Calm Flow

Speed Variation

Differentes vitesses de defilement.

CSS Speed
Hover to Pause Interactive Marquee User Control Try It Now
Hover to Pause Interactive Marquee User Control Try It Now

Hover Pause

Pauses on mouse hover.

CSS Interactive
Gradient Edges Smooth Fade Premium Effect Elegant Design
Gradient Edges Smooth Fade Premium Effect Elegant Design

Gradient Fade

Gradient fade on edges.

CSS Gradient
Row One Left First Line Moving Left
Row One Left First Line Moving Left
Row Two Right Second Line Moving Right
Row Two Right Second Line Moving Right
Row Three Left Third Line Moving Left
Row Three Left Third Line Moving Left

Alternating Rows

Rows alternating directions.

CSS Multi-row
Logo 1
Logo 2
Logo 3
Logo 4
Logo 5
Logo 6
Logo 1
Logo 2
Logo 3
Logo 4
Logo 5
Logo 6

Logo Ticker

Bandeau de logos de partenaires.

CSS Logos
★ Five Stars ♥ We Love Design ⚡ Fast Delivery ✎ Creative Work
★ Five Stars ♥ We Love Design ⚡ Fast Delivery ✎ Creative Work

Marquee with Icons

Text mixed with icons and symbols.

CSS Icons

Frequently Asked Questions

How to create an infinite carousel in CSS? +

Duplicate the item list. Apply animation: scroll Xs linear infinite. When the animation reaches the end of the first list, it seamlessly restarts because the second list is identical. Use overflow:hidden on the container.

How to make a responsive slider without a library? +

Use CSS scroll-snap: overflow-x:auto, scroll-snap-type:x mandatory on the container, scroll-snap-align:start on each slide. Arrow buttons use scrollBy() in JavaScript. Zero dependencies.

What is the best carousel for images? +

For full-screen images, use a slider with transform transition. For thumbnails, a carousel with scroll-snap + thumbnail navigation. For a portfolio, a masonry grid with lightbox on click.

How to optimize carousel performance? +

Load images with lazy loading (loading='lazy'). Pre-load only the next slide. Use images in the right format (WebP) and at the right size. For marquees, use will-change:transform.

How to make a carousel accessible? +

Add role='region' and aria-label on the container. Arrow buttons have aria-label='Previous'/'Next'. Each slide has role='group' and aria-roledescription='slide'. Support keyboard navigation with arrow keys.

Similar Categories

🃏

Cards & Layouts

33 effects

 📜

Scroll & Parallax

30 effects

 👆

Hover & Interactions

48 effects