Разворот стрелки по наведению и/или нажатию

Question

Нужно реализовать разворот по наведению/нажатию на стрелку новостей в формате как они на картинке.

Я пробовал , вырезать картинку разворота ,как отдельный элемент и дальше работать через :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>

Answer 1

Если добавить "обертку" и задать ей относительную позицию, то повороты элемента-стрелки не будут влиять на остальной layout.

C Grid это так же будет работать корректно, достаточно будет расположить блок .wrapper в нужной Вам колонке и/или ряду.

Ниже я привел простой пример на основе Вашего исходного кода что бы это продемонстрировать:

body {
  height: 500px;
}

.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;
}

.notes_img { // временные стили
  width: 40px;
  height: 40px;
  border: 1px solid blue;
}

.test-string {
  margin: 0;
}

.wrapper {
  position: relative;
}

.img {
  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: red;
  transition: transform 0.5s ease;
}

.img:hover {
  transform: rotate(50deg);
}

<div class="notes_row">
  <div class="notes_img"></div>
  <div>
    <h2>Заголовок</h2>
    <P>Текст</P>
    <P>Текст</P>
    <P>Текст</P>
  </div>
</div>

<div class="notes_row">
  <div class="notes_img"></div>
  <div>
    <h2>Заголовок</h2>
    <P>Текст</P>
    <P>Текст</P>
    <P>Текст</P>
  </div>
</div>

<p class="test-string">Тестовая строка</p>
<div class="wrapper">
  <div class="img"></div>
</div>

БЛОГ НА HUSL

Разворот стрелки по наведению и/или нажатию

Ответы (1 шт):