Página de inicio Efecto deslizante de imagen Sitio web

3,327 kevekıbhack

Abrir en el editor Publica tu código

Página de inicio Efecto deslizante de imagen Sitio web

Recomendado

12 May 2026

Insertar juego a pantalla completa: HTML, iFrame, JavaScript

21 July 2025

Página de destino de alquiler de coches

2 April 2026

Cargador HTML5 y configuración de Firebase para el juego Escape Road

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