title: Add shade to block
body: <p>Hello I have several li elements with images and text ( text on image ), and I want to add shade over image ( I want to get dark image and normal text )</p>
  
  <p>My html</p>
  
  <pre><code>&lt;li&gt;
      &lt;div class="block-news-textoverlay text-center"&gt;
          &lt;h2&gt;
              Lorem ipsum
          &lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetu&lt;/p&gt;
      &lt;/div&gt;
      &lt;img src="1.jpg" alt=""&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>My css</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>So I try to add div with "shade" class to li element</p>
  
  <pre><code>&lt;li&gt;
      &lt;div class="shade"&gt;
          &lt;div class="block-news-textoverlay text-center"&gt;
              &lt;h2&gt;
                  Lorem ipsum
              &lt;/h2&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetu&lt;/p&gt;
          &lt;/div&gt;
          &lt;img src="1.jpg" alt=""&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>and use css</p>
  
  <pre><code>.shade{
      background-image: linear-gradient(to bottom, transparent 0, #000000 130%);
      background-repeat: repeat-x;
  }
  </code></pre>
  
  <p>but it doesn't work</p>