Материализовать карты перемещаются, когда действие карты зависает

Question

Я пытаюсь наложить верхний ряд карточек поверх заголовка, используя z-index в проекте с использованием Materialize CSS. Поскольку карты теперь используют относительное позиционирование, это приводит к тому, что некоторые из них перемещаются при наведении курсора на действие карты (результат менее заметен в мобильном представлении, поскольку в каждой строке есть только одна карта). Я также не собирался, чтобы текст действия карты перемещался в центр при наведении курсора, хотя меня это устраивает. Я пробовал использовать абсолютное позиционирование, а также изменять, к какому элементу применяется позиционирование. Как я могу предотвратить смещение карточек и по-прежнему использовать z-index? Вот мой код и ссылка на мой ( codepen ):

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

:root {
  --primary-color: #c31432;
  --primary-text-color: rgba(0,0,0,0.5);
  
  --primary-text: "Open Sans", sans-serif;
}

* {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

#works-header {
  position: absolute;
  height: 500px;
  width: 100vw;
  z-index: 10;
}

#works-header h1 {
  font-size: 3rem;
  letter-spacing: 1px;
  margin: 0 auto;
}

#cards {
  position: relative;
  top: 400px;
  z-index: 1000;
}

.card-image {
  cursor: pointer;
  transition: all .3s ease;
}

.card-image:hover {
  border: 3px solid var(--primary-color);
  opacity: 0.85;
}

.card-image:hover .card-title {
  display: none;
}

.card-action {
  width: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all .3s ease;
}

.card-action:hover {
  width: 100%;
  position: absolute; /* this prevents cards from shifting due to relative positioning on the card element */
  opacity: 0.7;
  border-bottom: 2px solid var(--primary-color);
}

.card-tags {
  display: none;
}

  .card-image:hover .card-tags {
    display: block;
    position: absolute;
    left: 1rem;
    bottom: 2rem;
    letter-spacing: 2px;
    font-weight: 300;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<!-- Todos: fix all cards aligned on the right side (card-action does not work properly) -->

<section class="center" id="works">
  <div id="works-header" class="black valign-wrapper">
    <h1 class="white-text center-align">Check out some of my latest projects</h1>
    <p></p>
  </div>
<div class="container row" id="cards">
    <div class="col s12 m6 l4">
      <div class="card z-depth-3">
        <div class="card-image">
          <img src="https://i.imgur.com/vxaE0nK.png">
          <span class="card-tags white-text">HTML, CSS, Javascript</span>
          <span class="card-title white-text">Netflix Clone</span>
        </div>
        <div class="card-content flow-text">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
        </div>
        <div class="card-action">
          <a href="#" class="pink-text">View project</a>
        </div>
      </div>
    </div>
  
    <div class="col s12 m6 l4">
      <div class="card z-depth-3">
        <div class="card-image">
          <img src="https://i.imgur.com/vxaE0nK.png">
          <span class="card-tags white-text">HTML, CSS, Javascript</span>
          <span class="card-title white-text">Netflix Clone</span>
        </div>
        <div class="card-content flow-text">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
        </div>
        <div class="card-action">
          <a href="#" class="pink-text">View project</a>
        </div>
      </div>
    </div>
  
    <div class="col s12 m6 l4">
      <div class="card z-depth-3">
        <div class="card-image">
          <img src="https://i.imgur.com/vxaE0nK.png">
          <span class="card-tags white-text">HTML, CSS, Javascript</span>
          <span class="card-title white-text">Netflix Clone</span>
        </div>
        <div class="card-content flow-text">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
        </div>
        <div class="card-action">
          <a href="#" class="pink-text">View project</a>
        </div>
      </div>
    </div>
  
    <div class="col s12 m6 l4">
      <div class="card z-depth-3">
        <div class="card-image">
          <img src="https://i.imgur.com/vxaE0nK.png">
          <span class="card-tags white-text">HTML, CSS, Javascript</span>
          <span class="card-title white-text">Netflix Clone</span>
        </div>
        <div class="card-content flow-text">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
        </div>
        <div class="card-action">
          <a href="#" class="pink-text">View project</a>
        </div>
      </div>
    </div>
  
    <div class="col s12 m6 l4">
      <div class="card z-depth-3">
        <div class="card-image">
          <img src="https://i.imgur.com/vxaE0nK.png">
          <span class="card-tags white-text">HTML, CSS, Javascript</span>
          <span class="card-title white-text">Netflix Clone</span>
        </div>
        <div class="card-content flow-text">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
        </div>
        <div class="card-action">
          <a href="#" class="pink-text">View project</a>
        </div>
      </div>
    </div>
  
    <div class="col s12 m6 l4">
      <div class="card z-depth-3">
        <div class="card-image">
          <img src="https://i.imgur.com/vxaE0nK.png">
          <span class="card-tags white-text">HTML, CSS, Javascript</span>
          <span class="card-title white-text">Netflix Clone</span>
        </div>
        <div class="card-content flow-text">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
        </div>
        <div class="card-action">
          <a href="#" class="pink-text">View project</a>
        </div>
      </div>
    </div>
  
    
    <div class="col s12 m6 l4">
      <div class="card z-depth-3">
        <div class="card-image">
          <img src="https://i.imgur.com/vxaE0nK.png">
          <span class="card-tags white-text">HTML, CSS, Javascript</span>
          <span class="card-title white-text">Netflix Clone</span>
        </div>
        <div class="card-content flow-text">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
        </div>
        <div class="card-action">
          <a href="#" class="pink-text">View project</a>
        </div>
      </div>
    </div>
  
    <div class="col s12 m6 l4">
      <div class="card z-depth-3">
        <div class="card-image">
          <img src="https://i.imgur.com/vxaE0nK.png">
          <span class="card-tags white-text">HTML, CSS, Javascript</span>
          <span class="card-title white-text">Netflix Clone</span>
        </div>
        <div class="card-content flow-text">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
        </div>
        <div class="card-action">
          <a href="#" class="pink-text">View project</a>
        </div>
      </div>
    </div>
  </div>
  </div>  
</section>

Answer 1

Основная причина, по которой это происходит - из-за border на hover. Если вам действительно нужен этот вид - добавьте пустой div внутри card-image и добавьте для него вставку box-shadow.

<div class="card-image">
    <img src="https://i.imgur.com/vxaE0nK.png">
    <span class="card-tags white-text">HTML, CSS, Javascript</span>
    <span class="card-title white-text">Netflix Clone</span>
    <div class="hover-shadow"></div>
</div>

и для CSS:

.card-image .hover-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.card-image:hover .hover-shadow {
    box-shadow: inset 0 0 0 2px (--primary-color);
}

Полный пример кодовое поле

Answer 2

Одним из решений является добавление границы к изображению карточки, чтобы вы меняли только непрозрачность и цвет, а не размер границы (которая, в свою очередь, пересчитывает размер изображения и вызывает мерцание). Браузеру сложно обрабатывать все сразу.

.card-image {
  cursor: pointer;
  transition: all .3s ease;
  border: 3px solid black;
}

Codepen .

EDIT:

Извините, я понял, что было два проблемы.

Хорошо, поэтому вам не нужно абсолютное позиционирование в заголовке - абсолютное извлекает элементы из потока страницы. Здесь не нужно этого делать. Снимите родственник с карточек и используйте отрицательное поле:

#cards {
    top: 400px;
    z-index: 1000;
    margin-top: -100px;
}

Я удалил абсолютное позиционирование при наведении курсора, так как это не очень хорошая идея. Абсолютное позиционирование пригодится, когда вам нужно точно контролировать позиционирование элементов. Здесь нет необходимости. Я также убрал 50% ширины и добавил границу по умолчанию, чтобы предотвратить мерцание при действии карты.