Site Web avec effet de curseur d'image d'accueil

1356 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Site Web avec effet de curseur d'image d'accueil

Recommandé

17 July 2024

Modèle de site Web de portfolio HTML 2024

15 May 2025

Portefeuille

1 September 2025

Extrait de code d'animation CSS Heart

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é

Modèle de site Web de portfolio HTML 2024

Portefeuille

Extrait de code d'animation CSS Heart

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS