Skip to content
Related Articles

Related Articles

Improve Article

How to Create Image Accordion using HTML and CSS ?

  • Difficulty Level : Expert
  • Last Updated : 22 Feb, 2021

In this article, we are going to create an image accordion that is basically used for advertising purposes on e-commerce websites using HTML and CSS.

Approach:

  • Create an HTML file in which we are going to add different types of images for advertisement.
  • Create a CSS style to give some animation effects to the web-page elements.

HTML Code:

  1. First, create a HTML file (index.html).
  2. Now after the creation of our HTML file, we are going to give a title to our webpage using the <title> tag. It should be placed inside the <head> tag.
  3. Then link the CSS file that provides all the animation’s effect to our HTML. This is also placed in between the <head> tag.
  4. Coming to the body section of our HTML code.
    1. Then we have to add different advertisements.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <div class="main_box">
        <div class="img img1">
            <p>gfg 1</p>
        </div>
  
        <div class="img img2">
            <p>gfg 2</p>
        </div>
  
        <div class="img img3">
            <p>gfg 3</p>
        </div>
  
        <div class="img img4">
            <p>gfg 4</p>
        </div>
    </div>
</body>
  
</html>

CSS Code: CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to all users.



In CSS, we have to remind the following points –

  • Restore all the browser effects.
  • Use classes and ids to give effects to HTML elements.
  • Use of :hover to use hover effects.

CSS




/* Restoring browser properties */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: white;
}
  
body{
    background-color: rgb(0, 0, 0);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.main_box{
    width: 90%;
    height: 80vh;
    display: flex;
}
  
.img{
    flex: 1;
    height: 100%;
    transform: skew(10deg);
    cursor: pointer;
    margin: 0 0.125em;
    transition: all .3s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 1px solid pink;
    position: relative;
}
  
p{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .75em;
    background-color: rgba(0,0,0,0.6);
    transform: rotate(-90deg);
    transform-origin: 0% 0%;
    transition: all 0.3s;
    text-transform: uppercase;
    white-space: nowrap;
}
  
.img1 {
    background-image: url(gfg1.jpg);
}
  
.img2 {
    background-image: url(gfg2.png);
}
  
.img3 {
    background-image: url(gfg3.jpg);
}
  
.img4 {
    background-image: url(gfg4.jpg);
}
  
.main_box:hover .img{
    transform: skew(0);
}
  
.img:hover{
    flex: 5;
}
  
.img:hover p{
    background-color: transparent;
    border: .125em solid blue;
    color: rgb(255, 38, 0);
    transform: rotate(0deg);
}

Final Code:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        /* Restoring browser properties */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            color: white;
        }
          
        body {
            background-color: rgb(0, 0, 0);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
          
        .main_box {
            width: 90%;
            height: 80vh;
            display: flex;
        }
          
        .img {
            flex: 1;
            height: 100%;
            transform: skew(10deg);
            cursor: pointer;
            margin: 0 0.125em;
            transition: all .3s;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            border: 1px solid pink;
            position: relative;
        }
          
        p {
            position: absolute;
            bottom: 0;
            left: 0;
            padding: .75em;
            background-color: rgba(0, 0, 0, 0.6);
            transform: rotate(-90deg);
            transform-origin: 0% 0%;
            transition: all 0.3s;
            text-transform: uppercase;
            white-space: nowrap;
        }
          
        .img1 {
            background-image: url(
        }
          
        .img2 {
            background-image: url(
        }
          
        .img3 {
            background-image: url(
        }
          
        .img4 {
            background-image: url(
        }
          
        .main_box:hover .img {
            transform: skew(0);
        }
          
        .img:hover {
            flex: 5;
        }
          
        .img:hover p {
            background-color: transparent;
            border: .125em solid blue;
            color: rgb(255, 38, 0);
            transform: rotate(0deg);
        }
    </style>
</head>
  
<body>
    <div class="main_box">
        <div class="img img1">
            <p>gfg 1</p>
        </div>
  
        <div class="img img2">
            <p>gfg 2</p>
        </div>
  
        <div class="img img3">
            <p>gfg 3</p>
        </div>
  
        <div class="img img4">
            <p>gfg 4</p>
        </div>
    </div>
</body>
  
</html>

Output:

In this way, you can create your own advertisement section!.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :