Добавить тень блокировать

Question

Привет У меня есть несколько элементов Li с изображениями и текстом (текст на изображении), и я хочу, чтобы добавить тень на картинку (я хочу, чтобы получить темное изображение и обычный текст)

Мой HTML

<li> 
    <div class="block-news-textoverlay text-center"> 
     <h2> 
      Lorem ipsum 
     </h2> 
     <p>Lorem ipsum dolor sit amet, consectetu</p> 
    </div> 
    <img src="1.jpg" alt=""> 
</li> 

Мой CSS

.block-news-textoverlay { 
    transform: translateY(-50%); 
    text-align: center; 
    position: absolute; 
    z-index: 10; 
    right: 0; 
    top: 50%; 
    left: 0; 
    padding-left: 75px; 
    padding-right: 75px; 
} 

Так я пытаюсь добавить DIV с классом "тени" Ли элемент

<li> 
    <div class="shade"> 
     <div class="block-news-textoverlay text-center"> 
      <h2> 
       Lorem ipsum 
      </h2> 
      <p>Lorem ipsum dolor sit amet, consectetu</p> 
     </div> 
     <img src="1.jpg" alt=""> 
    </div> 
</li> 

и использование CSS

.shade{ 
    background-image: linear-gradient(to bottom, transparent 0, #000000 130%); 
    background-repeat: repeat-x; 
} 

, но он не работает

Answer 1

Вот пример использования фонового изображения и элемент псевдо.

.block-news-textoverlay { 
 
    transform: translateY(-50%); 
 
    text-align: center; 
 
    position: absolute; 
 
    z-index: 10; 
 
    right: 0; 
 
    top: 50%; 
 
    left: 0; 
 
    padding-left: 75px; 
 
    padding-right: 75px; 
 
    background: url(http://lorempixel.com/output/nature-q-c-800-800-6.jpg) no-repeat center center; 
 
    background-size: cover; 
 
    color: #fff; 
 
} 
 
.block-news-textoverlay:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    z-index: -1; 
 
}

<li> 
 
    <div class="block-news-textoverlay text-center"> 
 
    <h2>Lorem ipsum</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetu</p> 
 
    </div> 
 
</li>