CSS 3: наложение изображения при наведении

Я создал эффект изображения, при котором изображение увеличивается при наведении курсора, а накладываемый текст остается того же размера. Сейчас я пытаюсь создать полупрозрачное темное наложение поверх изображения при наведении курсора, но эффект наложения не вступит в силу при преобразовании масштабирования. Кажется, что наложение тени конфликтует с масштабированием. Это мой код:

.grid_container>.box-item,
.grid_container>.box-itemw {
  width: 100%;
}

.box-item img,
.box-itemw img {
  width: 100%;
}

.box-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  ms-transform: translate(-50%, -50%);
  color: var(--white);
  font-size: 20px;
}

.grid_container {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 5px;
}

.grid_container>.box-item {
  position: relative;
  align-content: flex-start;
  width: calc(33.33% - 40px);
}

.grid_container>.box-itemw {
  position: relative;
  align-content: flex-start;
  width: calc(100% - 40px);
}

.box-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  ms-transform: translate(-50%, -50%);
  color: var(--white);
  font-size: 20px;
  z-index: 999;
}

.box-item,
.box-itemw {
  position: relative;
  /* border: 1px solid red; */
  display: inline-block;
  max-height: 300px;
  max-width: 100%;
  overflow: hidden;
}

.service-image:hover,
.box-text:hover+.service-image {
  transform: scale(1.1);
  transition: all 1s;
}

.box-item:before {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: inherit;
  content: ' ';
  overflow: hidden;
  transition: .5s;
}

.box-item:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

<div class = "grid_container">
  <div class = "box-item">
    <img src = "https://placehold.co/600x400" class = "service-image" alt = "travel 1">
    <div class = "box-text">
      dummy text
    </div>
  </div>
</div>

Я пробовал различные комбинации кода, но не нашел решения. Любые предложения по коду будут очень признательны.

.box-text:hover+.service-image - + — следующий однородный комбинатор. У вашего элемента .box-text нет следующего брата или сестры.

— 15.04.2024 11:34

html css zooming transform

15.04.2024 11:24

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

z-index: 1 для наложения должен располагаться над преобразованным изображением.

Селектор правила эффекта масштабирования можно изменить для работы с родительским элементом :hovered: .box-item:hover .service-image.

.grid_container>.box-item,
.grid_container>.box-itemw {
  width: 100%;
}

.box-item img,
.box-itemw img {
  width: 100%;
}

.box-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  ms-transform: translate(-50%, -50%);
  color: var(--white);
  font-size: 20px;
}

.grid_container {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 5px;
}

.grid_container>.box-item {
  position: relative;
  align-content: flex-start;
  width: calc(33.33% - 40px);
}

.grid_container>.box-itemw {
  position: relative;
  align-content: flex-start;
  width: calc(100% - 40px);
}

.box-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  ms-transform: translate(-50%, -50%);
  color: var(--white);
  font-size: 20px;
  z-index: 999;
}

.box-item,
.box-itemw {
  position: relative;
  /* border: 1px solid red; */
  display: inline-block;
  max-height: 300px;
  max-width: 100%;
  overflow: hidden;
}

.service-image:hover,
.box-item:hover .service-image {
  transform: scale(1.1);
  transition: all 1s;
}

.box-item:before {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: inherit;
  content: ' ';
  overflow: hidden;
  transition: .5s;
  z-index: 1;
}

.box-item:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

<div class = "grid_container">
  <div class = "box-item">
    <img src = "https://placehold.co/600x400" class = "service-image" alt = "travel 1">
    <div class = "box-text">
      dummy text
    </div>
  </div>
</div>

Спасибо, Хедфол! Ваше решение отлично работает! Так что это был родительский селектор .box-item, а не текстовое поле, как вы говорите! - Да, глупый я :)

— 15.04.2024 17:37

15.04.2024 14:39