Мне нужна небольшая помощь с адаптивным CSS (flex box) и изображениями, которые мне нужно вращать, используя только CSS.
Я создал две ручки, чтобы вы могли увидеть мою проблему.
Первое похоже на то, как я хочу, чтобы конечный продукт выглядел, и что работает на моем текущем сайте.Флексбоксы реагируют и изменяют размеры должным образом, и изображения и фоновое изображение / цвета находятся там, где я хочу, а текст центрируется по вертикали и горизонтали, как и должно быть.
https://codepen.io/hmhaley/pen/xMBvJo
ВотHTML-код, который работает должным образом (хотя, возможно, у меня есть дополнительные слои div, в которых я не нуждаюсь):
<div class="boxTable">
<div class="boxBody">
<div class="boxRow">
<div class="boxCell firstBox">
<div class="boxImage"><img class="bottom" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_1.jpg">
</div>
</div>
<div class="boxCell secondBox">
<div class="boxText" style="color: #ffffff; background-image: url(https://www.thereconnection.com/sites/default/files/ps_f4/ps_f4/background.jpg);">
<div class="textFormat">EXPAND YOUR POSSIBILITIES
</div>
</div>
</div>
<div class="boxCell thirdBox">
<div class="boxText" style="color: #ffffff; background-color: #ffffff;">
<div class="textFormat" style="color: #999999">ACHIEVE A HIGHER LEVEL OF CONNECTION WITH OTHERS
</div>
</div>
</div>
<div class="boxCell fourthBox"><img src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_2-f1.png">
</div>
</div>
</div>
</div>
И CSS-код, который работает с HTML выше (хотя у меня могут быть некоторые дополнительные классыМне не нужно):
body {
background-color: white;
}
.boxTable {
display: table;
width: 100%;
}
.boxBody {
display: table-row-group;
}
.boxRow {
display: flex;
flex-flow: row wrap;
width: 100%;
min-height: 200px;
}
.boxCell {
border: 0px solid #999999;
padding: 0px 0px;
width: 50%;
}
.boxCell img {
width: 100%;
height: auto;
display: flex;
}
.boxText {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.textFormat {
margin: 0;
padding: 0;
text-align: center;
font-weight: bold;
font-size: 2vw;
}
Тогда мой начальник попросил, чтобы каждое изображение затухало по таймеру, чтобы две разные картинки вращались взад и вперед в каждой другой клетке.Я получил эту функцию, чтобы успешно работать, но потом она портит мои гибкие флексбоксы.Я не могу понять, как сделать оба вместе.Я бы использовал Javascript и попробовал бы так ... но у нас нет доступа для добавления сценариев JavaScript внутри нашей CMS (Drupal).Итак, мне нужно, чтобы это происходило только с CSS / HTML.
https://codepen.io/hmhaley/pen/WPmVyX
Вот HTML-код того, что не работает (блоки не выстраиваются / растягиваются / не отвечают, как раньше), хотя затухание работает):
<div class="boxTable">
<div class="boxBody">
<div class="boxRow">
<div class="boxCell firstBox">
<div class="boxImage"><img class="bottom" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_1.jpg"><img class="top" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_2-f1.png"></div>
</div>
<div class="boxCell secondBox">
<div class="boxText" style="color: #ffffff; background-image: url(https://www.thereconnection.com/sites/default/files/ps_f4/ps_f4/background.jpg);">
<div class="textFormat">EXPAND YOUR POSSIBILITIES
</div>
</div>
</div>
<div class="boxCell thirdBox">
<div class="boxText" style="color: #ffffff; background-color: #ffffff;">
<div class="textFormat" style="color: #999999">BECOME CERTIFIED IN RECONNECTIVE HEALING®
</div>
</div>
</div>
<div class="boxCell firstBox">
<div class="boxImage"><img class="bottom" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_2-f1.png"><img class="top" src="https://www.thereconnection.com/sites/default/files/PalmSping_page_slider_1.jpg"></div>
</div>
</div>
</div>
</div>
И вот соответствующий CSS для того, что не работает, что идет с HTML выше:
body {
background-color: white;
}
.boxTable {
display: table;
width: 100%;
}
.boxBody {
display: table-row-group;
}
.boxRow {
display: flex;
flex-flow: row wrap;
width: 100%;
min-height: 200px;
}
.boxCell {
border: 0px solid #999999;
padding: 0px 0px;
width: 50%;
}
.boxCell img {
width: 100%;
height: auto;
display: flex;
}
.boxText {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.textFormat {
margin: 0;
padding: 0;
text-align: center;
font-weight: bold;
font-size: 2vw;
}
.boxImage {
position: relative;
margin: 0 auto;
}
.boxImage img {
position: absolute;
left: 0;
width: 100%;
height: auto;
display: flex;
}
.boxImage > img.top {
animation-name: fade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}
@keyframes fade {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}
Может кто-нибудь помочь мне выяснить, какие изменениясделать так, чтобы CSS сохранял их размер / высоту и отзывчивость (как на первом коде), но при этом картинки появлялись и исчезали (как на втором коде)?
Ятолько бэби-кодер, и еще больше менеджера по продукту Sr и операционного парня в реальной жизни, так что это уже несколько дней пинает меня в задницу.Я просто не могу понять это в данный момент, и мне нужно сдаться и попросить небольшой помощи.Приведенные выше ручки - просто пример кода, который я использую на довольно сложной одностраничной «целевой странице» с множеством разных форматов ... но я борюсь с тем разделом этой страницы ... так чтоЯ вытащил его и заново создал в codepen, чтобы получить некоторую помощь.Это мой первый пост в StackOverflow, так что будьте спокойны, если я не публикую это должным образом.: -)
И, заранее спасибо всем, у кого есть несколько минут, чтобы взглянуть на это и дать несколько советов.