Горизонтальный слайдер изображений на чистом CSS
Адаптивный слайдер-аккордеон изображений, построенный исключительно на технологиях CSS/CSS3, позволяет горизонтально расширять изображение при наведении на него курсора мыши.
На небольших экранах, таких как мобильные устройства, слайдер будет преобразован в вертикальный список изображений.
HTML
Код
<div class="accordion"> <ul>
<li>
<div> <a href="#">
<h2>Title 1</h2>
<p>Description 1</p>
</a> </div>
</li>
<li>
<div> <a href="#">
<h2>Title 2</h2>
<p>Description 2</p>
</a> </div>
</li>
<li>
<div> <a href="#">
<h2>Title 3</h2>
<p>Description 3</p>
</a> </div>
</li>
<li>
<div> <a href="#">
<h2>Title 4</h2>
<p>Description 4</p>
</a> </div>
</li>
<li>
<div> <a href="#">
<h2>Title 5</h2>
<p>Description 5</p>
</a> </div>
</li>
<li>
<div> <a href="#">
<h2>Title 6</h2>
<p>Description 6</p>
</a> </div>
</li>
</ul>
</div>
CSS
Код
.accordion { width: 100%;
max-width: 1080px;
height: 250px;
overflow: hidden;
margin: 50px auto;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%;
height: 250px;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
}
.accordion ul li div {
display: block;
overflow: hidden;
width: 100%;
}
.accordion ul li div a {
display: block;
height: 250px;
width: 100%;
position: relative;
z-index: 3;
vertical-align: bottom;
padding: 15px 20px;
box-sizing: border-box;
color: #fff;
text-decoration: none;
font-family: Open Sans, sans-serif;
transition: all 200ms ease;
}
.accordion ul li div a * {
opacity: 0;
margin: 0;
width: 100%;
text-overflow: ellipsis;
position: relative;
z-index: 5;
white-space: nowrap;
overflow: hidden;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
.accordion ul li div a h2 {
font-family: Montserrat, sans-serif;
text-overflow: clip;
font-size: 24px;
text-transform: uppercase;
margin-bottom: 2px;
top: 160px;
}
.accordion ul li div a p {
top: 160px;
font-size: 13.5px;
}
Добавление фоновых изображений для аккордеона слайдера
.accordion ul li:nth-child(1) { background-image: url("1.jpg"); }
.accordion ul li:nth-child(2) { background-image: url("2.jpg"); }
.accordion ul li:nth-child(3) { background-image: url("3.jpg"); }
.accordion ul li:nth-child(4) { background-image: url("4.jpg"); }
.accordion ul li:nth-child(5) { background-image: url("5.jpg"); }
.accordion ul li:nth-child(6) { background-image: url("6.jpg"); }
Создание эффекта расширения с помощью CSS3 свойства ‘transform’:
.accordion ul:hover li { width: 8%; }
.accordion ul:hover li:hover { width: 60%; }
.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }
.accordion ul:hover li:hover a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
Преобразуем слайдер-аккордеон в список изображений для случаев, когда размер ширины экрана менее 600px
@media screen and (max-width: 600px) {.accordion { height: auto; }.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
Огромное спасибо https://ps-studio.info/forum/18-12-1