Text overlay opacity

user_5856544 0
Viewed 1782

I'm trying to make an overlay on an image in css but I have some problems I don't know how to solve. Check this image out, this is a mockup in PhotoShop:

enter image description here

but I got this:

enter image description here

As you can see the blockquote and text also have a opacity, this is the only thing I actually need to solve(the blur is not required, would appreciate a good example though)

I also created a codepen, other image, same code

img.header {
  width: 100%;
}

div.wrapper {
  position: relative;
  /* important(so we can absolutely position the description div */
}

div.description {
  height: 100%;
  position: absolute;
  /* absolute position (so we can position it where we want)*/
  bottom: 0px;
  /* position will be on bottom */
  left: 50%;
  width: 50%;
  /* styling bellow */
  background-color: #cddc39;
  color: white;
  opacity: 0.4;
  /* transparency */
  filter: alpha(opacity=60);
  /* IE transparency */
}

p.description_content {
  padding: 10px;
  margin: 0px;
  font-size: 30px;
}
<div id="praktijk" class="col s12">
  <div class="row pad-top">
    <div>
      <div class='wrapper'>
        <!-- image -->
        <img class="header" src='https://www.w3schools.com/w3images/fjords.jpg' />
    ' />
        <!-- description div -->
        <div class='description'>
          <!-- description content -->
          <p class='description_content'>
            <blockquote>
              This is an example quotation that uses the blockquote tag.
            </blockquote>
          </p>
          <!-- end description content -->
        </div>
        <!-- end description div -->
      </div>
    </div>
  </div>
</div>

css html
4 Answers

Sir Farhad Bagherlo got the right one. Just change the overlay's background color to rgb/rgba of the color and tone you want then remove the opacity. That makes it easeir. Here is a list of colors you may use: https://www.december.com/html/spec/colorrgbadec.html

user_110996790
Related