Как правильно установить текстовую подпись на изображении с изображением при наведении

Я пытался использовать угловую кладку. Я пытался сделать что-то вроде того, когда при наведении курсора на изображение изображение темнеет, и заголовок будет более экспонированным (высококонтрастным) над изображением, чтобы можно было правильно его прочитать. Тем не менее, когда я пытаюсь навести курсор на изображение, заголовок или, в моем случае, я называю его заголовком, внутри моего изображения исчезает (или, по-видимому, это также влияет на затемнение изображения).

Чтобы полностью понять, что я имею в виду, посмотрите этот пример кода на StackBlitz

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

Источник

3 ответа

Решение

Проблема в том, что .feed-header сидит за фильтром, поэтому вам нужно установить z-index в этом классе:

.masonry-item
.feed-container
.feed-header {
  position: absolute;
  width: 100%;
  padding: 10px;
  align-items: center;
  display: flex;
  z-index: 9;
}

Кроме того, если вы хотите сделать текст контрастным, вы можете установить его на белый при наведении курсора (для контраста с темным фильтром). Вы можете сделать это используя:

.masonry-item
.feed-container:hover
.feed-header {
  color: white;
}

Вот демонстрация StackBlitz

Источник

Попробуйте это демо

Файл CSS

.box {  

    cursor: pointer;  
    height: 468px;  
    float: left;  
    margin: 5px;  
    position: relative;  
    overflow: hidden;  
    width: 468px;  

}  

 .box img {  
    position: absolute;  
    left: 0;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}  


.box .caption {  
    font-family: Tahoma;
    font-size: .5em;
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;  
    z-index: 100;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
    left: 0;  
    opacity: 0;  
    width: 450px;  
    height: 450px;  
    text-align: left;  
    padding: 15px;
}  



 .box:hover .fade-caption {  
    opacity: 1;  
}

HTML-файл

<div id="mainwrapper"> 

<!-- Image Caption 3 -->  
     <!-- Image Caption 3 -->  
    <div class="box">  
        <img id="image-3" src="https://www.w3schools.com/howto/img_avatar.png"/>  
        <span class="caption fade-caption">  
        <h3>Fade Caption</h3>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
        </span>  
    </div>

   <div class="box">  
        <img id="image-3" src="https://www.w3schools.com/howto/img_avatar.png"/>  
        <span class="caption fade-caption">  
        <h3>Fade Caption</h3>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
        </span>  
    </div>


</div>
Источник

Этот стекблиц должен работать

Все, что я сделал, это поместил заголовок перед изображением и добавил его как SASS в ваш CSS-файл:

ngxMasonryItem {
  .feed-text {
    color: white;
    z-index: 9999;
  }
  &:hover {
    img {
      filter:  blur(2px) brightness(50%)
    }
  }
}

(Удаление предыдущего фильтра, который вы использовали)

в HTML порядок объявления важен, и поэтому z-index,

Источник
Другие вопросы по тегам