Нужно реализовать разворот по наведению/нажатию на стрелку новостей в формате как они на картинке.
Я пробовал , вырезать картинку разворота ,как отдельный элемент и дальше работать через :hover
который по наведению менял бы с display: none;
на нужный мне , но не могу уйти на наложения слоев , или сдвигов. так участок , который в картинке реализован в сетке grid
. Контент внутри блоков я тоже располагал сеткой.
В случае выложенного кода у меня не работает hover, а если я загоняю всё в один блок(элементы , которые надо спрятать и потом показать) по по наведение получается такая шляпа:
.notes {
grid-column-start: 2;
grid-column-end: 3;
display: grid;
grid-template-rows: auto;
}
.notes div {
padding: 5px;
}
.notes h2 {
margin-bottom: 10px;
}
.notes_img {
margin-right: 50px;
}
.notes_row {
display: grid;
grid-template-columns: 30% 70%;
}
#notes_row_img {
display: flex;
justify-content: center;
align-items: center;
}
#notes_row_hide {
display: none;
}
.notes_row_img_main:hover {
cursor: pointer;
}
.notes_row_img_main:hover #notes_row_hide {
display: block;
}
<div class="notes_row">
<div class="notes_img">
<img src="images/logo.png" height="50px" alt="">
</div>
<div>
<h2>Заголовок</h2>
<P>Текст</P>
<P>Текст</P>
<P>Текст</P>
</div>
</div>
<div class="notes_row">
<div class="notes_img">
<img src="images/logo.png" height="50px" alt="">
</div>
<div>
<h2>Заголовок</h2>
<P>Текст</P>
<P>Текст</P>
<P>Текст</P>
</div>
</div>
<div class="notes_row" id="notes_row_img">
<div class="notes_rote_img_main">
<img class="notes_row_img_main" src="images/more.jpg" height="50px" alt="">
<div class="notes_row" id="notes_row_hide">
<div class="notes_img">
<img src="images/logo.png" height="50px" alt="">
</div>
<div>
<h2>Заголовок</h2>
<P>Текст</P>
<P>Текст</P>
<P>Текст</P>
</div>
</div>
<div class="notes_row" id="notes_row_hide">
<div class="notes_img">
<img src="images/logo.png" height="50px" alt="">
</div>
<div>
<h2>Заголовок</h2>
<P>Текст</P>
<P>Текст</P>
<P>Текст</P>
</div>
</div>
</div>