title: Bootstrap 4 light color Overlay on top of Image to make text standout/see better
body: <p>So i am trying to put a very light color on top of img or the parent div of the image so that what ever the image is , light or dark the text will be visible clearly without any problem. As you can see i am using bootstrap card class to have the text over image also. This is my attempt so far, but having this opacity is making the text and image dimmer, I wanted the image to be dimmer/lighter so that text is strongly visible. Whats a good solution here. I seen people using a transparent background color as image and overlaying it css, I dont know if thats a good approach </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dnow-regionsContent {
      background-color: SlateGray;
      position: relative;
      width: 100%;
      height: 100%;
      opacity: 0.8;
  }
  .dnow-regionsContent .card-img-overlay img {
      max-height: 40rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
     &lt;meta charset="UTF-8"&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
     &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
     &lt;title&gt;slick slider&lt;/title&gt;
     &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous"&gt;
  
  
     &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
     &lt;section class="dnow-regionsWrap"&gt;
        &lt;div class="dnow-regionsContent"&gt;
           &lt;div class="card bg-dark text-white"&gt;
              &lt;img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt=""&gt;
              &lt;div class="card-img-overlay d-flex align-items-center container"&gt;
                 &lt;div class="row  mb-5"&gt;
                    &lt;div class=" col-sm-12 text-content"&gt;
                       &lt;h2 class="card-title "&gt;
                          Canada
                       &lt;/h2&gt;
                       &lt;button class="btn btn-primary"&gt;
                          Viewl all Location
                       &lt;/button&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/section&gt;
  
     &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"&gt;&lt;/script&gt;
     &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"&gt;&lt;/script&gt;
     &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>