Changing the opacity only of the outer div and not its elements

Question

I am practicing my bootstrap skills and created a sample template. So what I did in one of my rows was to add a CSS code that reduces it's opacity. The result is shown below.

However,as you can see,the the div's elements opacity is changed too. The image is in a div using the media class,and the div next to it uses the media-body class,and contains just a header a paragraph. Nothing special. And here is the code for it.

 <div class="row row-content">
    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
      <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img src="img/alcazar.png" class="media-object img-thumbnail" alt="alcazar">
            </a>
        </div>
        <div class="media-body">
            <div class="media-heading"><h3>Alcazar Park</h3></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More&raquo;</a></p>   
        </div>

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

At the beginning you see the row-content class which is use in CSS as:

.row-content {
   background-color: #000 !important;
   color: #fff;
   opacity: 0.5;
   margin:0px auto;
   padding: 50px 0px 50px 0px;
   min-height:200px;
}

So how can I increase the opacity of the picture,the header and the paragraph? It's a bit tricky,I think.

Thanks,

Theo.

EDIT

Here is the jsfiddle code to have a go.

Can you please create a jsfiddle or a runnable code snippet here? — Bhargav Ponnapalli, Feb 12 '17 at 15:35
I am trying to add the CSS and JS libraries,but I don't know how:( https://jsfiddle.net/2L42j4bb/ — Theo, Feb 12 '17 at 15:42

Tom Withers · Accepted Answer · 2017-02-12T16:15:36.210

I would suggest changing the opacity of the background only, By doing this all other elements will be un-effected by the style property.

this can be done with:

background-color: rgba(0,0,0,0.5);

Here you are setting the background color using RGB and then adding the alpha which will allow you to control the opacity.

rgba(Red,Green,Blue,Alpha)

I would also recommend adding !important so that we know the style is defiantly being used

practical example for you:

.row-content {
   background-color: rgba(0,0,0,0.5) !important;
   color: #fff;
   margin:0px auto;
   padding: 50px 0px 50px 0px;
   min-height:200px;
}

Here is a CodePen: http://codepen.io/GuruTom/pen/qRLrpz

Changing the opacity only of the outer div and not its elements

1 Answers1