Как создать аккордеон изображения с помощью HTML и CSS?

Опубликовано: 27 Августа, 2022

В этой статье мы увидим, как создать аккордеон изображения с помощью HTML и CSS, который в основном используется в рекламных целях на веб-сайтах электронной коммерции. Аккордеон часто используется для открытия нескольких разделов на полную ширину, а также для перемещения содержимого страницы вниз.

Подход:

Создайте файл HTML, в котором будут содержаться различные типы изображений для рекламы.
Создайте стиль CSS, который обеспечит некоторые эффекты анимации для элементов веб-страницы.

HTML-код:

Создайте файл HTML с именем index.html , который содержит заголовок нашей веб-страницы с использованием тега <title>. Он должен быть помещен внутри тега <head>.
Свяжите файл CSS, обеспечивающий все эффекты анимации, с нашим HTML. Это также помещается внутри тега <head>.
В разделе body создайте класс main_box с соответствующими классами div, содержащими различные рекламные изображения.

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: CSS используется для предоставления различных типов анимации и эффектов для нашей HTML-страницы, чтобы она выглядела интерактивной для всех пользователей. В CSS отметим следующие моменты:

Восстановите все эффекты браузера.
Используйте классы и идентификаторы, чтобы придать эффекты элементам HTML.
Использование :hover для использования эффектов наведения.

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(
https://media.geeksforgeeks.org/wp-content/uploads/20211216100749/GFG1.jpg);
}
 
.img2 {
    background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20211216100751/GFG2.png);
}
 
.img3 {
    background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20211216100753/GFG3.jpg);
}
 
.img4 {
    background-image: url(
https://media.geeksforgeeks.org/wp-content/uploads/20211216100754/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);
}

Вывод: Таким образом, вы можете создать свой собственный раздел рекламы!.

Technical Scripter HTML CSS

Как создать аккордеон изображения с помощью HTML и CSS?

HTML

CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ