Pravayest Pravayest Pravayest Pravayest - 1 year ago 87
CSS Question

Add shade to block

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 )

My 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>


My 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;
}


So I try to add div with "shade" class to li element

<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>


and use css

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


but it doesn't work

Answer Source

Here's an example using background image and a pseudo element.

.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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download