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 multiple sections at full width & also content pushes the page content downward.
Approach:
- Create an HTML file that 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.
Example: Here is the implementation of the above-explained steps.
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 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
Recommended Articles