Un code par kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 September 2025

Code graphique interactif SVG Dragon

26 May 2025

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

Un code par kevekıbhack

Recommandé

Code graphique interactif SVG Dragon

Un code par mironovbogdan341

Un code de Mete

HTML

CSS

JS

Recommandé

Code graphique interactif SVG Dragon

Un code par mironovbogdan341

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS