CSS onhover внутри сетки сетки ⇐ CSS

[Anonymous]

Я пытаюсь сделать эффект onhover (эффект типа Flip Card) внутри макета коробки сетки (слоистая настройка) - с помощью кода, который я зацепил онлайн и редактирую его. Я использую плагин Beaver Builder с темой Astra Pro для WordPress, поэтому могут быть проблемы, связанные с этой конфигурацией (хотя поддержка BB говорит, что это не так - они предложили опубликовать на своем форуме сообщества и здесь.) < /P>
Существует родительский набор для повторения (7, 1fr), детские коробки, установленные «слоя» в Builder (это позволяет делить в рамках, а затем в комплекте, а затем в комплекте в разделе «Позволяет», а затем в комплекте в разделе «Позволяет», а затем в комплекте в разделе «Внутри», а затем в комплекте, в разделе «Наденье». Чтобы «накрыть», которая в основном представляет собой DIV с фоновым изображением, тогда он находится внутри коробки с их текстовым модулем (еще один Div, который я размещаю HTML). < /p>
Я новичок в сетке CSS и Flexbox. Поэтому интересно, есть ли что -то уникальное в сетчатой ​​коробке, вмешавшейся в код, который я зацепил, или что -то, что я не обнаруживаю в самом коде CSS. Если я использую 100% высоту, эффект не работает, ничего не происходит при колебании. Прямо сейчас он установлен на высоте 200 пикселей. Если я добавлю соотношение в детские коробки (что также является идеальным), он заставляет строки дисплей 6 ящиков вместо 7, поэтому я подозреваю, что он все еще реагирует на конечную высоту, а не на отзывную высоту. Соотношение 2/3 (2: 3) является стандартным для пленки и телевизионного плаката, поэтому я предпочитаю использовать это свойство в детских коробках. Вам нужно будет зависать к середине коробок, чтобы увидеть эффект в действии. Спасибо за любые советы или предложения. PrettyPrint-Override ">

Код: Выделить всё

.card {
width: 100%;
height: 200px;
margin: 50% auto;
perspective: 1000px;
cursor: pointer;
border: 0px;
}

.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}

.card:hover .card-inner {
transform: rotateY(180deg);
}

.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.card-front {
background-color: rgba(0, 0, 0, 0.0);
border: 0px;
}

.card-back {
background-color: rgba(0, 0, 0, 0.52);
color: white;
transform: rotateY(180deg);
}< /code>



[b]SERVICES & PRODUCTS[/b]

Подробнее здесь: https://stackoverflow.com/questions/795 ... box-layout