Блог

Я написал некоторый css, который отображает наложение на мое изображение при наведении курсора мыши, изображение также имеет заголовок по центру посередине. Заголовок должен z-index: 999 быть уверен, что он находится перед наложением.

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

Это страница, на которую я ссылаюсь — https://jtracks.org.uk/jtrack/1/module/1

Вот мой html-код

 <div class="module" style="background-image: url({{ url('') }}/storage/{{ $lesson_plan->thumbnail }})">
  <h2 class="lesson-thumbnail-number">LESSON {{ $lesson_plan->lesson_number }}</h2>
  <div class="thumbnail-overlay"></div>
</div>
  

Вот мой CSS

 .module {
    margin: 0 10px;
    margin-top: 15px;
    height: 240px;
    padding-left: 40px;
    padding-right: 40px;
    position: relative;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;;
}

.thumbnail-overlay {
    width: 100%;
    height: 240px;
    z-index: 2;  
    position: absolute;
    top: 0; 
    margin-left: -40px;
}

.thumbnail-overlay:hover{ 
  background-color: rgba(0, 150, 107, 0.7);
}
  

ПРИМЕЧАНИЕ — если вы посетите веб-сайт, вы заметите, что при наведении курсора мыши на изображение над изображением также появляется описание, это было опущено, чтобы сделать мой вопрос более упрощенным. Это та же проблема, что и заголовок, поэтому я предполагаю, что исправление устранит обе проблемы.

Изменить

 .thumbnail-overlay:hover{ 
  background-color: rgba(0, 150, 107, 0.7);
}
  

Для:

 .module:hover .thumbnail-overlay { 
   background-color: rgba(0, 150, 107, 0.7);
}