Skip to content
Related Articles

Related Articles

How to Create Image Accordion using HTML and CSS ?

Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 16 Dec, 2021
Improve Article
Save Article

In this article, we will see how to create an image accordion using HTML & CSS that is basically used for advertising purposes on e-commerce websites. An Accordion is often used to open the multiple sections with full width & also content pushes the page content downward.

Approach:

  • Create an HTML file in which will contain the different types of images for advertisement.
  • Create a CSS style that will provide some animation effects to the web page elements.

HTML Code:

  • Create an HTML file, named index.html, that contains a title to our webpage using the <title> tag. It should be placed inside the <head> tag.
  • Link the CSS file that provides all the animation’s effects to our HTML. This is also placed inside the <head> tag.
  • In the body section, create a class main_box that has the corresponding div classes containing the different advertisements images.

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 provide the different types of animations and effects to our HTML page so that it looks interactive to all users. In CSS, we will note 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(
}
 
.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);
}

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

Image Accordion 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!