1

is there anyone to add an overlay using html to make the image darker? I tried using data-overlay=0.6. However, no effect took place. If it isn't possible, can I do use the below coding?

!-- Slide 1 -->
<li data-index="slide-1" data-transition="fade" data-slotamount="1" data-easein="default" data-easeout="default" data-masterspeed="500" data-rotate="0" data-delay="6000">
<!-- Main image -->
<img class="pic_slide_one" src="media/image/slider/audi-black-car-8639.jpg" alt="slide-1" data-bgfit="cover" data-bgposition="center bottom">


  /* Styling and fetching IMG */
  .pic_one_slider {
    background:linear-gradient(0deg,rgba(0,0,0,0.95),rgba(0,0,0,0.95)),url('media/image/slider/audi-black-car-8639.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
kldcdkladlkdncd
  • 15
  • 8

3 Answers3

2

It looks like your question goes beyond a simple image overlaying. For a single image, my suggestion would be to use an position: absolute div so that you can overlay however you want (color, with another picture, etc)

The idea is:

  • a container div. Container has here display: inline-block so that it takes the width and height of the img child. If your container has full width, you may skip this
  • the img itself
  • an empty div which does the overlay. The overlay can be done via multiple options:
    • in case of a single color, you can use background: rgba(0, 0, 0, 0.5) where 0.2 is the opacity
    • Put whatever you want in the div and use opacity: 0.5

Here is an example:

.darken-img{
  /* to make absolute children depending on this parent */
  position: relative;
  /* to make parent div adapt to img width/height*/
  display: inline-block;
}

.darken-img img{
  height: 400px;
}

.darken-img .darkener{
  /* to go overlay the img */
  position: absolute;
  top: 0;
  /* to cover the whole img */
  height: 100%;
  width: 100%;
  /* make your choice here */
  background: rgba(0,0,0,0.6);
}
<div class="darken-img">
  <img src="http://st.motortrend.com/uploads/sites/5/2017/04/2018-Lexus-NX-300h-front-three-quarter-01.jpg" />
  <div class="darkener"></div>
</div>
Al-un
  • 3,102
  • 2
  • 21
  • 40
0

You could try decreasing the opacity. Depending on your image and expected results, this may be just enough:

 .pic_one_slider {
   opacity: 0.8;
 }
Vlad Danila
  • 1,222
  • 3
  • 18
  • 38
0

This is difficult to answer without access to all of the css included, but this is how I would do it. You could try overlapping the image with a div with the same width and height of the image and a background-color property set to black and then setting the opacity value of that div.

Note the usage of z-index which requires the position property to be set. In this example I've set it to absolute.

  .overlay {
    background-color: black;
    width: 600px;
    height: 400px;
    z-index: 2;
    position: absolute;
    opacity: 0.8;
  }

and

<div class="overlay"></div><img class="pic_slide_one" src="https://www.w3schools.com/w3css/img_lights.jpg" alt="slide-1" data-bgfit="cover" data-bgposition="center bottom" style="z-index:1;position: absolute;">

Obviously you could include the styling on your img class somewhere else, such as within your pic_slide_one class.

josef
  • 83
  • 9