Проблемы, подражающие эффекту и сестра на другого брата ⇐ CSS

[Anonymous]

Я хотел бы подражать эффекту и выводу, которые у меня есть на #boxleft, но когда я это делаю, и добавить переход CSS3, он не работает. Я должен был использовать его с значением маржинальной вершины -100PX, чтобы скрыть его. Кто-нибудь может помочь?body {
padding: 0;
margin: 0;
}
p, h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0;
}
#box {
width: 100%;
height: 100px;
background-color: #636363;
}
.boxLeft,
.boxRight {
width: 50%;
height: 100px;
/* display: inline-block; */
float: left;
padding: 10px;
box-sizing: border-box;
z-index: 1;
overflow: hidden;
}
.boxLeft {
background-color: red;
}
.blHeader {
text-align: right;
}
.boxLeft:hover {
background-color: orange;
width: 100%;
transition: .5s;
}
.boxLeft:hover ~.boxRight {
display: none;
}
.boxLeft:hover > .blHeader {
text-align: left;
}
.boxLeft:hover > .blCon {
display: block;
}
.blCon,
.brCon {
display: none;
}
.boxRight {
background-color: blue;
}
.boxRight:hover {
background-color: green;
width: 100%;
transition: .5s;
margin-top: -100px;
}
.boxRight:hover~.boxLeft {
display: none;
}
.boxRight:hover > .brHeader {
text-align: left;
}
.boxRight:hover > .brCon {
display: block;
transition: .5s;
}< /code>


Left Header
Left content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
repudiandae cumque!

RIght Header
Right content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
repudiandae cumque!

< /code>
< /div>
< /div>
< /p>
Я уверен, что я просто что -то упускаю, но у меня была трещина в течение нескольких часов. Заранее спасибо. Вот ссылка на ручку: https://codepen.io/digiknowzone/pen/zrbjnj

Подробнее здесь: https://stackoverflow.com/questions/354 ... er-sibling