Bootstrap 4 light color Overlay on top of Image to make text standout/see better
I don't know if I understand the question, but from what i understand you want to apply an overlay color on top of the image so the image became dimmer. If that this solution may help you create a new div
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt="">
<div class="overlay-div"></div> <!-- the new div -->
<div class="card-img-overlay d-flex align-items-center container">
and apply some css styles
.overlay-div{
height:100%;
width: 100%;
position:absolute;
background-color:#000;
opacity:.7;
}
there is a pen file you can try it img overlay color
jsPlayer
Updated on June 04, 2022Comments
-
jsPlayer almost 2 years
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
.dnow-regionsContent { background-color: SlateGray; position: relative; width: 100%; height: 100%; opacity: 0.8; } .dnow-regionsContent .card-img-overlay img { max-height: 40rem; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>slick slider</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css"> </head> <body> <section class="dnow-regionsWrap"> <div class="dnow-regionsContent"> <div class="card bg-dark text-white"> <img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt=""> <div class="card-img-overlay d-flex align-items-center container"> <div class="row mb-5"> <div class=" col-sm-12 text-content"> <h2 class="card-title "> Canada </h2> <button class="btn btn-primary"> Viewl all Location </button> </div> </div> </div> </div> </div> </section> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>