Diaporama d'images HTML CSS JavaScript

420 jbostnancode

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

12 December 2024

Curseur d'images pour Blogspot CSS3

30 November 2025

Formulaire de connexion HTML (français)

9 December 2025

Modèle de formulaire de connexion HTML/CSS Deezer Aesthetic

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Slider Effect Website</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="slide">
            <div class="item" style="background: url('https://i.postimg.cc/g0W4qN2y/Switzerland.jpg');">
                <div class="content">
                    <div class="name">Switzerland</div>
                    <div class="description">Renowned for its breathtaking Alpine scenery and precision in craftsmanship</div>
                    <button>See More</button>
                </div>
            </div>

<div class="item" style="background: url('https://i.postimg.cc/DZfgR0s8/Finland.jpg');">
                <div class="content">
                    <div class="name">Finland</div>
                    <div class="description">Known for its saunas, lakes, and a deep connection to nature</div>
                    <button>See More</button>
                </div>
            </div>

<div class="item" style="background: url('https://i.postimg.cc/kX2jn2HS/Iceland.jpg');">
                <div class="content">
                    <div class="name">Iceland</div>
                    <div class="description">Famous for its stunning geothermal landscapes, waterfalls, and glaciers</div>
                    <button>See More</button>
                </div>
            </div>

<div class="item" style="background: url('https://i.postimg.cc/05WWRYVx/Australia.jpg');">
                <div class="content">
                    <div class="name">Australia</div>
                    <div class="description">Distinguished by its diverse ecosystems, ranging from beaches to bushland</div>
                    <button>See More</button>
                </div>
            </div>

<div class="item" style="background: url('https://i.postimg.cc/dtg5DqMx/Netherland.jpg');">
                <div class="content">
                    <div class="name">Netherland</div>
                    <div class="description">Characterized by its iconic canals, tulip fields, and windmills</div>
                    <button>See More</button>
                </div>
            </div>

<div class="item" style="background: url('https://i.postimg.cc/sDGJktB9/Ireland.jpg');">
                <div class="content">
                    <div class="name">Ireland</div>
                    <div class="description">Known for its lush green landscapes and rich cultural heritage</div>
                    <button>See More</button>
                </div>
            </div>
        </div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

body {
    background: #eaeaea;
    overflow: hidden;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 600px;
    background: #f5f5f5;
    box-shadow: 0 30px 50px #dbdbdb;
}

.container .slide .item {
        width: 200px;
        height: 300px;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        border-radius: 20px;
        box-shadow: 0 30px 50px #505050;
        background-position: 50% 50%;
        background-size: cover;
        background-repeat: no-repeat;
        display: inline-block;
        transition: .5s;
    }

.slide .item:nth-child(1), .slide .item:nth-child(2) {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
}

.slide .item:nth-child(2) .content { display: block; }

.slide .item:nth-child(3) {
    left: 50%;
}

.slide .item:nth-child(4) {
    left: calc(50% + 220px);
}

.slide .item:nth-child(5) {
    left: calc(50% + 440px);
}

.slide .item:nth-child(n + 6) {
    left: calc(50% + 440px);
    overflow: hidden;
}

.item .content {
    position: absolute;
    top: 50%;
    left: 100px;
    width: 300px;
    text-align: left;
    color: #eee;
    transform: translate(0, -50%);
    font-family: system-ui;
    display: none;
}

.content .name {
    font-size: 40px;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0;
    animation: animate 1s ease-in-out 1 forwards;
}

.content .description {
    margin-top: 10px;
    margin-bottom: 20px;
    opacity: 0;
    animation: animate 1s ease-in-out .3s 1 forwards;
}

.content button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    opacity: 0;
    animation: animate 1s ease-in-out .6s 1 forwards;
}

@keyframes animate{
        from {
            opacity: 0;
            transform: translate(0, 100px);
            filter: blur(33px);
        }

to {
            opacity: 1;
            transform: translate(0);
            filter: blur(0);
        }
    }

.button {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20px;
}

.button button {
    width: 40px;
    height: 35px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    margin: 0 5px;
    border: 1px solid #000;
    transition: .3s;
}

.button button:hover {
        background: #ababab;
        color: #fff;
    }

Recommandé

Curseur d'images pour Blogspot CSS3

Formulaire de connexion HTML (français)

Modèle de formulaire de connexion HTML/CSS Deezer Aesthetic

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS