Для этого проще всего использовать псевдоэлементы ( :: before или :: after ). Вы не можете использовать псевдоэлементы на элементах изображения, поэтому вам нужно изменить их все на div.
Вы хотите, чтобы страница была адаптивной, чтобы она хорошо смотрелась на разных разрешениях экрана .
Вы хотите повторить как можно меньше кода и упростить его обновление в будущем. Сделайте это с CSS переменными.
a. Вы должны зарезервировать #id для уникальных элементов, когда дело доходит до стиля; попытка вызвать #img, как вы это сделали, может привести к неправильному отображению.
b. Избегайте использования float столько, сколько вы можете в дизайне. position: absolute тоже, если возможно.
c. ИМХО приятнее анимировать left вместо margin-left.
HTML
<div class="slideshow">
<div class="img one" data-tooltip="Fachada Canelada"></div>
<div class="img two" data-tooltip="image two"></div>
<div class="img three" data-tooltip="image three"></div>
<div class="img four" data-tooltip="image four"></div>
<div class="img five" data-tooltip="image five"></div>
<div class="img six" data-tooltip="image six"></div>
<div class="img seven" data-tooltip="image seven"></div>
<div class="img eight" data-tooltip="image eight"></div>
<div class="img nine" data-tooltip="image nine"></div>
<div class="img ten" data-tooltip="image ten"></div>
</div>
Я изменил ваш HTML на следующий. Сначала интересно, насколько я различаю разные div с атрибутом class. Позже я объясню data-tooltip.
Слайд-шоу CSS очень просто:
.slideshow {
width: 100%;
height: 380px;
display: flex;
overflow: hidden;
}
Установите ширину, равную ширине экрана (отзывчиво!), Чтобы избежать горизонтальных полос прокрутки. код имел. Используйте flex для отображения всех дочерних элементов в .slideshow в одном ряду.
.slideshow > .img {
min-width: 100%;`
padding-left: 50px;
box-sizing: border-box;
}
Дайте всем дочерним элементам min-width в размере 100% от родительского размера (что составляет 100% экрана ширина). Используйте padding вместо margin, потому что свойство flex не может учитывать запас при расчете ширины, но вычисляет отступы. Чтобы элемент div.img оставался на минимальной ширине 100% без добавления дополнительной ширины для заполнения, используйте box-sizing, чтобы отступы были частью вычисленной ширины.
.img.one {
background-image: url("https://i.stack.imgur.com/sgmyk.jpg");
}
...
.slideshow > .img {
/* ... previous CSS code */
background-position: 50px center;
background-size: cover;
background-repeat: no-repeat;
}
Использование изображения в качестве фона, и добавьте дополнительные свойства в div.img, чтобы разместить фоновый элемент там, где вы хотите. Вам нужно переместить его 50px, если вы хотите освободить место для отступов.
.slideshow > .img {
position: relative;
/* ... previous CSS code */
}
.slideshow > .img::before {
content: attr(data-tooltip); /* displays the value of attribute data-tooltip */
position: absolute;
top: 50%; /* move it almost to the middle vertically */
left: 50px; /* take into account the padding */
right: 0px;
transform: translateY(-50%); /* Move the element up as far as half it's own size */
text-align: center;
padding: 1rem 0px; /* 1rem = the font size for your normal (bread) text */
background-color: rgba(0, 0, 0, 0.3); /* black transparent background */
color: white;
font-size: 24px;
}
Теперь текст на изображении. Используйте псевдоэлемент ::before (или :: after), для которого требуется свойство content. Используйте position: absolute, чтобы разместить текст там, где вы хотите, но не забудьте добавить position: relative к div.img. В любом случае он должен быть относительным, потому что анимация меняется на left: -3800px.
data-tooltip можно назвать как угодно, если только она начинается с data-. data-caption было бы лучше подходящим названием для него. Вы также можете использовать alt, как в content: attr(alt), но это не даст другому программисту никакой подсказки о специальном использовании alt - чтобы показать его как всплывающую подсказку.
.slideshow > .img::before {
display: none;
/* ... previous CSS code */
}
.slideshow > .img:hover::before {
display: block;
}
Однако вы хотите, чтобы код отображался только при наведении курсора, поэтому скрывайте псевдоэлемент, а затем отображайте его только при наведении курсора div.img.
И теперь появляется повторяемая часть. Вы можете решить это с помощью CSS переменных. Заполнение написано как 50px в трех разных местах. Изменения в любом из них позже почти наверняка не будут обновлены во всех местах. Добавьте переменную CSS к div.img.
.slideshow > .img {
--left-spacing: 50px;
/* ... previous CSS code */
padding-left: var(--left-spacing);
/* ... */
background-position: var(--left-spacing) center;
}
.slideshow > .img::before {
/* ... previous CSS code */
left: var(--left-spacing);
/* ... */
}
... и вы также можете использовать calc(), чтобы сделать анимацию отзывчивой. Добавьте --slideshow-items к div.img и используйте эту переменную во всем коде анимации:
@keyframes bannermove {
0% {
left: 0px;
}
100% {
left: calc(-1 * 100vw * (var(--slideshow-items) - 1));
}
}
-1 для перемещения элемента влево, 100vm - ширина экрана, --slideshow-items - переменная CSS, которую я добавил к div.img, чтобы показать количество изображений, и вам нужно вычесть из нее 1, чтобы не учитывать ширину первого элемента, в противном случае вы получите небольшую анимацию пробела. .
Полный код ниже, который вы можете попробовать:
.slideshow {
width: 100%;
height: 380px;
display: flex;
overflow: hidden;
}
.img.one {
background-image: url("https://i.stack.imgur.com/sgmyk.jpg");
}
.img.two {
background-image: url("https://i.stack.imgur.com/6NBDp.jpg");
}
.img.three {
background-image: url("https://i.stack.imgur.com/so5dX.jpg");
}
.img.four {
background-image: url("https://i.stack.imgur.com/KwlAe.jpg");
}
.img.five {
background-image: url("https://i.stack.imgur.com/Cl1Fj.jpg");
}
.img.six {
background-image: url("https://i.stack.imgur.com/sgmyk.jpg");
}
.img.seven {
background-image: url("https://i.stack.imgur.com/6NBDp.jpg");
}
.img.eight {
background-image: url("https://i.stack.imgur.com/so5dX.jpg");
}
.img.nine {
background-image: url("https://i.stack.imgur.com/KwlAe.jpg");
}
.img.ten {
background-image: url("https://i.stack.imgur.com/Cl1Fj.jpg");
}
.slideshow > .img {
--left-spacing: 50px;
--slideshow-items: 10;
--ignore-width-of-first-item: 1;
position: relative;
padding-left: var(--left-spacing);
box-sizing: border-box;
min-width: 100%;
background-position: var(--left-spacing) center;
background-size: cover;
background-repeat: no-repeat;
-webkit-animation: bannermove 25s linear infinite;
-moz-animation: bannermove 25s linear infinite;
-ms-animation: bannermove 25s linear infinite;
-o-animation: bannermove 25s linear infinite;
animation: bannermove 25s linear infinite;
}
.slideshow > .img::before {
display: none;
content: attr(data-tooltip);
position: absolute;
top: 50%;
left: var(--left-spacing);
right: 0px;
transform: translateY(-50%);
text-align: center;
padding: 1rem 0px;
background-color: rgba(0, 0, 0, 0.3);
color: white;
font-size: 24px;
}
.slideshow > .img:hover::before {
display: block;
}
@keyframes bannermove {
0% {
left: 0px;
}
100% {
left: calc(-1 * 100vw * (var(--slideshow-items) - var(--ignore-width-of-first-item)));
}
}
@-moz-keyframes bannermove {
0% {
left: 0px;
}
100% {
left: calc(-1 * 100vw * (var(--slideshow-items) - var(--ignore-width-of-first-item)));
}
}
@-webkit-keyframes bannermove {
0% {
left: 0px;
}
100% {
left: calc(-1 * 100vw * (var(--slideshow-items) - var(--ignore-width-of-first-item)));
}
}
@-ms-keyframes bannermove {
0% {
left: 0px;
}
100% {
left: calc(-1 * 100vw * (var(--slideshow-items) - var(--ignore-width-of-first-item)));
}
}
@-o-keyframes bannermove {
0% {
left: 0px;
}
100% {
left: calc(-1 * 100vw * (var(--slideshow-items) - var(--ignore-width-of-first-item)));
}
}
}
<div class="slideshow">
<div class="img one" data-tooltip="Fachada Canelada"></div>
<div class="img two" data-tooltip="image two"></div>
<div class="img three" data-tooltip="image three"></div>
<div class="img four" data-tooltip="image four"></div>
<div class="img five" data-tooltip="image five"></div>
<div class="img six" data-tooltip="image six"></div>
<div class="img seven" data-tooltip="image seven"></div>
<div class="img eight" data-tooltip="image eight"></div>
<div class="img nine" data-tooltip="image nine"></div>
<div class="img ten" data-tooltip="image ten"></div>
</div>