использование отступов для элементов списка с несколькими элементами внутри них

Question

Итак, у меня есть список HTML, где у каждого элемента списка есть изображение с заголовком заголовка над ним и поле за изображением, которое преобразуется при наведении курсора. Я близок к тому, чтобы все выглядело так, как мне хотелось бы, но элементы списка, кажется, не взаимодействуют так, как должны. Я пытаюсь сделать так, чтобы прямоугольник находился непосредственно за изображением, а текст располагался по центру над прямоугольником, но в настоящее время они слегка смещены. Вот JSFiddle JSFiddle , демонстрирующий список.

пример одного из элементов списка выглядит следующим образом:

        <li>
            <a href = ""  class="linkChange">
                <h6 class ="headings">Appointment App</h6>
                <img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
                <span class="box rotate" id = "box"></span>
            </a>
        </li>

Подробное описание css приведено в JSFiddle. Я немного новичок в Web Dev, так что простите, если некоторые из CSS являются избыточными.

Answer 1

Вместо использования <span> после тега <img> вместо этого поместите ваше изображение в <div> и примените фон к этому div. Также удалите position: absolute;, который у вас есть на .imgs и .box.

<div class="box rotate" id = "box">
    <img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
</div>

Answer 2

Я думаю, что у вас слишком много CSS происходит, и многие стили избыточны или перезаписываются другими стилями. Но я не хочу уделять этому слишком много внимания, поскольку это не обзор кода, а решение. Я вырезал стили, которые не были нужны.

Вот что я изменил:

• Переместил h6 за пределы ссылки, так как пользователи, скорее всего, нажмут на большой целевая область изображения, а не текст заголовка.
• Добавил display: flex к вашему якору и выровнял его содержание по центру.
• Я установил white-space: nowrap на h6, чтобы он выглядел чище над ящиками. Вот результат.

.appsList {
  list-style: none;
  display: flex;
  margin: 0 auto;
}

.appsList li {
  position: relative;
  padding: 100px;
}

.appsList .headings {
  color: purple;
  white-space: nowrap;
  margin: 0 0 .75rem;
  font-size: 1.2rem;
}

.linkChange {
  display: flex;
  justify-content: center;
}

.imgs {
  position: absolute;
  z-index: 1;
  display: inline-block;
}

.box {
  position: absolute;
  background: #5FCF80;
  width: 200px;
  height: 200px;
  z-index: -1;
}


/* Box comes immediately after imgs, so it can be selected to transform on hover with imgs */

#imgs:hover+#box {
  transform: rotate(360deg);
  background: #9351A6;
  border-radius: 50%;
  transition: all 1s ease-in-out;
  z-index: -1;
}

.box:hover {
  transform: rotate(360deg);
  background: #9351A6;
  border-radius: 50%;
  z-index: -1;
}

.rotate {
  transition: all 0.5s ease-in-out;
}

.rotate:hover {
  transition: all 1s ease-in-out;
}

<ul class="appsList">
  <li>
    <h6 class="headings">Appointment App</h6>
    <a href="" class="linkChange">
      <img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/calendar.png" />
      <span class="box rotate" id="box"></span>
    </a>
  </li>

  <li>
    <h6 class="headings">Second App</h6>
    <a href="" class="linkChange">
      <img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/brain.png" />
      <span class="box rotate" id="box"></span>
    </a>
  </li>


  <li>
    <h6 class="headings">Banking App</h6>
    <a href="" class="linkChange">
      <img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/bank-building.png" />
      <span class="box rotate" id="box"></span>
    </a>
  </li>

  <li>
    <h6 class="headings">Reimburement App</h6>
    <a href="" class="linkChange">
      <img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/cash-in-hand.png" />
      <span class="box rotate" id="box"></span>
    </a>
  </li>

</ul>

jsFiddle