Image Accordion | Vivek Singh

HTML

CSS

JAVA SCRIPT

Copy Code

If Code is not visible please click on HIGHLIGHT area

                        <div class="body">
        <h1>Image Accordion Simple</h1>
        <div class="image-accordion-wrapper">
            <div class="item"><img src="https://source.unsplash.com/random/512×512/?fruit" alt=""></div>
            <div class="item"><img src="https://source.unsplash.com/random/512×512/?mountains" alt=""></div>
            <div class="item"><img src="https://source.unsplash.com/random/512×512/?forest" alt=""></div>
            <div class="item"><img src="https://source.unsplash.com/random/512×512/?dubai" alt=""></div>
            <div class="item"><img src="https://source.unsplash.com/random/512×512/?snowfall" alt=""></div>
            <div class="item"><img src="https://source.unsplash.com/random/512×512/?greenland" alt=""></div>
        </div>
        <h1>Image Accordion With Text</h1>
        <div class="image-accordion-wrapper with-text">
            <div class="item">
                <div class="country">
                    <h4>Dubai</h4>
                </div>
                <div class="content-wrapper">
                    <h1>Dubai Package</h1>
                    <p>Explore the vibrant city of Dubai with our exclusive package. Lorem ipsum dolor sit amet
                        consectetur adipisicing elit. Repellendus, vel?</p>
                </div>
            </div>
            <div class="item">
                <div class="country">
                    <h4>Paris</h4>
                </div>
                <div class="content-wrapper">
                    <h1>Paris Package</h1>
                    <p>Experience the romance of Paris with our specially curated package. Lorem ipsum dolor sit amet
                        consectetur adipisicing elit. Repellendus, vel?</p>
                </div>
            </div>
            <div class="item">
                <div class="country">
                    <h4>London</h4>
                </div>
                <div class="content-wrapper">
                    <h1>London Package</h1>
                    <p>Discover the historic charm of London with our tailored package. Lorem ipsum dolor sit amet
                        consectetur adipisicing elit. Repellendus, vel?</p>
                </div>
            </div>
            <div class="item">
                <div class="country">
                    <h4>New York</h4>
                </div>
                <div class="content-wrapper">
                    <h1>New York Package</h1>
                    <p>Experience the hustle and bustle of New York City with our exciting package. Lorem ipsum dolor
                        sit amet consectetur adipisicing elit. Repellendus, vel?</p>
                </div>
            </div>
            <div class="item">
                <div class="country">
                    <h4>Tokyo</h4>
                </div>
                <div class="content-wrapper">
                    <h1>Tokyo Package</h1>
                    <p>Immerse yourself in the culture of Tokyo with our specially crafted package. Lorem ipsum dolor
                        sit amet consectetur adipisicing elit. Repellendus, vel?</p>
                </div>
            </div>
            <div class="item">
                <div class="country">
                    <h4>Sydney</h4>
                </div>
                <div class="content-wrapper">
                    <h1>Sydney Package</h1>
                    <p>Enjoy the scenic beauty of Sydney with our exclusive package. Lorem ipsum dolor sit amet
                        consectetur adipisicing elit. Repellendus, vel?</p>
                </div>
            </div>
        </div>
                        </div>

                    <p>Experience the romance of Paris with our specially curated package. Lorem ipsum dolor sit amet

Copy Code

If Code is not visible please click on HIGHLIGHT area

                        .body {
                            display: grid;
                            place-content: center;
                            width: 100%;
                            min-height: 100vh;
                            padding: 100px 50px;
                            padding-top: 50px;
                            row-gap: 50px;
                        }
                    
                        h1 {
                            text-align: center;
                            font-size: 2.5rem;
                            line-height: 3em;
                        }
                    
                        .image-accordion-wrapper {
                            width: 100%;
                            overflow: hidden;
                            height: 500px;
                            display: flex;
                            align-items: center;
                            border-radius: 25px;
                            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
                        }
                    
                        .image-accordion-wrapper .item {
                            flex: 1 1;
                            height: 100%;
                            transition: flex-grow 500ms ease-in-out;
                        }
                    
                        .image-accordion-wrapper .item img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            object-position: center;
                            transition: all 300ms linear;
                        }
                    
                        .image-accordion-wrapper .item:hover {
                            flex: 5 0;
                        }
                    
                        /* with text accordion  */
                    
                        .with-text .item {
                            position: relative;
                            background-position: center;
                            background-size: cover;
                            background-repeat: no-repeat;
                        }
                    
                        .with-text .item::after {
                            position: absolute;
                            content: '';
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
                            z-index: 1;
                            opacity: 0;
                            transition: opacity 200ms ease-in;
                        }
                    
                        .with-text .item:nth-child(1) {
                            background-image: url('https://source.unsplash.com/random/?Dubai');
                        }
                    
                        .with-text .item:nth-child(2) {
                            background-image: url('https://source.unsplash.com/random/?Paris');
                        }
                    
                        .with-text .item:nth-child(3) {
                            background-image: url('https://source.unsplash.com/random/?London');
                        }
                    
                        .with-text .item:nth-child(4) {
                            background-image: url('https://source.unsplash.com/random/?NewYork');
                        }
                    
                        .with-text .item:nth-child(5) {
                            background-image: url('https://source.unsplash.com/random/?Tokyo');
                        }
                    
                        .with-text .item:nth-child(6) {
                            background-image: url('https://source.unsplash.com/random/?Sydney');
                        }
                    
                        .with-text .item .country {
                            position: absolute;
                            top: 20px;
                            left: 0;
                            background-color: #1f7fdf;
                            border-top-right-radius: 50px;
                            border-bottom-right-radius: 50px;
                            padding: 5px 15px;
                        }
                    
                        .with-text .item .country h4 {
                            color: #fff;
                            font-weight: 400;
                            line-height: auto;
                            margin: 0;
                        }
                    
                        .with-text .item .content-wrapper {
                            position: absolute;
                            bottom: -100%;
                            left: 50%;
                            transform: translate(-50%, 0%);
                            text-align: center;
                            opacity: 0;
                            transition: opacity 400ms ease-in, bottom 250ms linear;
                            color: #fff;
                            z-index: 2;
                            width: 80%;
                        }
                    
                        .with-text .item:hover .content-wrapper {
                            bottom: 25px;
                            opacity: 1;
                        }
                    
                        .with-text .item:hover::after {
                            opacity: 1;
                        }
                    
                        @media (max-width: 1024px) {
                    
                            .image-accordion-wrapper {
                                flex-direction: column;
                                width: calc(100vw - 100px);
                                height: 100vh;
                            }
                    
                            .image-accordion-wrapper .item {
                                width: 100%;
                                height: 0;
                            }
                        }
                    
                        @media (max-width: 767px) {
                    
                            .image-accordion-wrapper {
                                width: calc(100vw - 50px);
                            }

                            .image-accordion-wrapper .item:hover {
                                flex: 7 0;
                            }
                        }

xxxxxxxxxx
                            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
 
                        .body {
                            display: grid;
                            place-content: center;
                            width: 100%;
                            min-height: 100vh;
                            padding: 100px 50px;
                            padding-top: 50px;
                            row-gap: 50px;
                        }
                    
                        h1 {
                            text-align: center;
                            font-size: 2.5rem;
                            line-height: 3em;
                        }
                    
                        .image-accordion-wrapper {
                            width: 100%;
                            overflow: hidden;
                            height: 500px;
                            display: flex;
                            align-items: center;

Copy Code

If Code is not visible please click on HIGHLIGHT area

                       // No Need

                       // No Need 