होम छवि स्लाइडर प्रभाव वेबसाइट

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

17 May 2025

कॉमिक स्टाइल लॉगिन और पंजीकरण फॉर्म

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

होम छवि स्लाइडर प्रभाव वेबसाइट

अनुशंसित

आधुनिक फ्लिप कार्ड

रेडियल मेनू

कॉमिक स्टाइल लॉगिन और पंजीकरण फॉर्म

HTML

CSS

JS

अनुशंसित

आधुनिक फ्लिप कार्ड

रेडियल मेनू

कॉमिक स्टाइल लॉगिन और पंजीकरण फॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS