Create Image Accordion using CSS

Hello Friends,

Today in this blog we can study how to create image accordion using CSS. Accordion create using JQuery, Bootstrap. we create accordion using CSS.
you can create that same accordion using that same code. for that you have to write correct path of images that you want in your project.

If you like this program (Custom Design) and want to get source code. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

See also  Animated Retro Button & Frame In Pure CSS - Buttons.css

You might like this:

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html>
    <head>
        <title>Image Accordion</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="img-accordion">
            <div class="img img1">
                <p>Aniket shri </p>
            </div>
            <div class="img img2">
                <p>Mitali Sao </p>
            </div>
            <div class="img img3">
                <p> Raju Parik</p>
            </div>
            <div class="img img4">
                <p>Chitra Singh</p>
            </div>
            <div class="img img5">
                <p>Priya Rao</p>
            </div>
        </div>
    </body>
</html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    background-color: #666;
    min-height: 100vh;
    display:flex;
    justify-content: center;
    align-items: center;
}
.img-accordion{
    width:90%; 
    height:80vh;
    display:flex;
}
.img{
    flex:1;
    height:100%;
    transform: skew(5deg);
    cursor: pointer;
    margin:0 2px;
    transition:all 0.3s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    border:1px solid #222;
    position: relative;
}
.img1{background-image: url("./person-1.jpg");}
.img2{background-image: url("./person-2.jpg");}
.img3{background-image: url("./person-3.jpg");}
.img4{background-image: url("./person-4.jpg");}
.img5{background-image: url("./person-5.jpg");}

.img p{
    position: absolute;
    bottom: 0;
    left:0;
    padding:10px;
    background-color: rgba(0,0,0,0.6);
    color:#fff;
    transform: rotate(-90deg);
    transform-origin:0% 0%;
    transition: all 0.3s;
    text-emphasis: Uppercase;
    font-family: cursive;
    white-space: nowrap;
}
.img-accordion:hover .img{transform:skew(0);}
.img:hover{
    flex:5;
}
.img:hover p{
    background-color: transparent;
    border:2px solid #222;
    color:#222;
    transform:rotate(0deg);
}

Output

Leave a Reply

Your email address will not be published. Required fields are marked *