Text overlay opacity

Question

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:

but I got this:

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>

Possible duplicate of [using a div to blur an image behind it?](https://stackoverflow.com/questions/19687846/using-a-div-to-blur-an-image-behind-it) — Don, Jul 26 '17 at 18:33
There's no standardized way to blur an image behind another element. — jhpratt, Jul 26 '17 at 18:33
duplicate of: https://stackoverflow.com/questions/19687846/using-a-div-to-blur-an-image-behind-it — Don, Jul 26 '17 at 18:33
the blur is extra, i just need the text to have no opacity.... — Achiel Volckaert, Jul 26 '17 at 18:48
You should update your question and title then; the title explicitly mentions blur — chazsolo, Jul 26 '17 at 19:20

Farhad Bagherlo · Accepted Answer · 2017-07-27T09:50:12.000

img.header { width: 100%;}
div.wrapper { 
   position: relative;
   overflow:hidden;
   
}
div#imageBlur, div.description {
   height: 100%;
   position: absolute;
   left: 50%;
   width: 50%;

}
div#imageBlur {
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 8px;
    background-position-x: 100%;
    -webkit-filter: blur(3px);
    filter: blur(3px);
    bottom: 8px;
}
div.description {
   bottom: 4px;
    background-color:rgba(205, 207, 57, 0.4) ;
    color: white;
}
p.description_content {font-size: 50px;}
blockquote{
    border-left:solid 2px #ffd800;
    padding-left:5px;
    font-size: 25px;
}

<div id="praktijk" class="col s12">
        <div class="row pad-top">
            <div>
                <div class='wrapper'>
                    <img class="header" src='https://www.w3schools.com/w3images/fjords.jpg' />
                    <!-- description div -->
                    <div id="imageBlur" style="background-image: url(https://www.w3schools.com/w3images/fjords.jpg);"></div>
                    <div class='description'>
                        <p class='description_content'>
                            <blockquote>
                                This is an example quotation that uses the blockquote tag.
                            </blockquote>
                        </p>
                    </div>

                </div>
            </div>
        </div>
</div>

looks great! only somehow i got a small line at the bottom? any idea's? http://imgur.com/a/qkPRV — Achiel Volckaert, Jul 27 '17 at 09:40
still got the problem, fixed it by applying padding-bottom: 5px to the img! — Achiel Volckaert, Jul 28 '17 at 14:34

score 0 · Answer 2 · answered Jul 26 '17 at 18:34

0

If you just want to apply the opacity to background, in this case just a background color, I prefer the rgba color. See this : css color https://www.w3schools.com/cssref/css_colors_legal.asp

for apply this property, you must translate your color from hex to rgb color

Here the page : https://www.webpagefx.com/web-design/hex-to-rgb/

so your wrapper class will just be this:

.div.description{
    height: 100%;
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 50%;
    background-color: rgb(205,220,57,0.6);
    color: white;
}

answered Jul 26 '17 at 18:34

Luki Centuri

185
1
6

the last parameter in background color define the opacity – Luki Centuri Jul 26 '17 at 18:36
You used `rgb` not `rgba` in the example. Also this doesn't address the blur which is what the main point of the question is, and isn't possible with CSS alone. – Don Jul 26 '17 at 18:38

score 0 · Answer 3 · answered Aug 12 '20 at 01:46

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

score -1 · Answer 4 · answered Jul 26 '17 at 18:44

-1

Oh, I'm sorry, I don't see the blured element If you want to make only the background blured, you must not put the text inside the background. Instead make 2 div:

First div as the background and filtered blur, then set the position:absolute, fully width and height. Dont forget to set position:relative to the parent;

Second div as the text

I hope this will help

answered Jul 26 '17 at 18:44

Luki Centuri

185
1
6

there is an edit button just below the answer. did you missed it? – Sagar V Jul 26 '17 at 18:45
I'm sorry. This is my first answer. I'm nervous :) – Luki Centuri Jul 26 '17 at 18:51
no problem. please edit the other answer and delete this one – Sagar V Jul 26 '17 at 19:00

Text overlay opacity

4 Answers4