Using Bootstrap 4 to create a light color overlay on top of an image for enhanced text visibility and emphasis

Trying to apply a light color on top of an image or its parent div to ensure that the text remains visible regardless of the image's darkness. Using the Bootstrap card class for overlaying text over the image but facing issues with opacity dimming both images and text. Looking for a solution to make the image lighter/dimmer while keeping the text prominent. Any suggestions? I've come across using a transparent background color as an image and then overlaying it with CSS, not sure if that's the best 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">
                        View all Locations
                     </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>

htmltwitter-bootstrapcssbootstrap-4

Answer №1

It seems like you're looking to add an overlay color on top of an image to make it appear dimmer. If that's the case, here is a solution for 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 then add some CSS styles

.overlay-div{
   height:100%;
   width: 100%;
   position:absolute;
   background-color:#000;
   opacity:.7;
}

You can try this out in a pen file here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

having difficulty setting up tabs using uib-tabset

I have been experimenting with dynamically creating tabs using uib-tabset. Each tab is supposed to contain a different form, but the issue I am facing is that the textbox from the first form is being overwritten by the newly generated tab. When I enter d ...

htmlangularjs

Delete class at waypoints

I am currently using waypoints.js to manage a single-page website that includes a highlighted navigation feature. When the viewport reaches the element with the class "content", the corresponding navigation point is given the class "active". The script i ...

javascriptjqueryhtmlcssjquery-waypoints

JavaScript is unable to execute anything that comes after the initial code, specifically document.get

<section class="blogSingle"> <div class="container"> <div class="row"> <div class="blogSingle-left col-md-8"> <div id="content3" class="blogSingleContent"></div> </div> <div class ...

javascripthtmlbootstrap-4

Top Choice for Customizable Location Bar Dragging

I'm currently working on an app that features a draggable location bar. This feature will allow users to navigate through chapters in a book and will be displayed at the bottom of the screen, similar to Kindle or other mobile reading applications. I ...

htmlcssmarkup

Adjust the color of the glyphicon icon within a date and time picker dropdown component

I decided to implement the bootstrap datetimepicker using this gem and utilized the following HTML code: <div id="custom-dates" style=" clear:both;"> <div class="container"> <div class="row"> <div class='col-md-3 col-xs-3' ...

javascripthtmlcssruby-on-railstwitter-bootstrap

The android webview is having trouble loading HTML that includes javascript

I have been attempting to showcase a webpage containing HTML and JavaScript in an android webview using the code below. Unfortunately, it doesn't seem to be functioning properly. Can someone provide assistance? Here is the code snippet: public class ...

javascriptandroidhtmlandroid-webview

Arranging elements on a website using CSS styling

I'm interested in creating a button <Button id="Button" text="Hey" />. I would like to know how I can position it on a webpage exactly where I want it, rather than it just appearing randomly without content. ...

htmlcss

Ensure that the child div remains at the bottom of the parent div

I'm trying to make sure that the subfooter div stays at the bottom of the childbox div like a footer. You can see the code on this jsfiddle link <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title ...

htmlcss

What steps should I take to ensure that elements beneath a div are made visible?

I've been working on a unique project to create a website with "hidden text" elements. One of the cool features I've developed is a circular div that follows my mouse cursor and flips all text below it using background-filter in both CSS and Jav ...

javascripthtmljquerycss

Tips for bringing a particular tab into focus when a page initially loads

My webpage features custom links (tabs) that display content when clicked. By default, the first tab is selected and its content is shown, while the rest are set to display:none. Clicking on any other link will assign the 'selected' class to it, ...

javascriptphpjqueryhtml

Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

Trying to create a customized PACS viewer for scrolling through a series of CT head images. However, encountering an issue with scrolling through all 59 images. Currently, able to scroll from the first to the 59th image, but struggling to loop back to the ...

jquerycss

Adjust the background hue of the Row in the Table

Is there a way to update the background color of a Table Row? I attempted using "BackgroundColor" but didn't see any changes Any suggestions on how to fix this issue? <TableRow style={{ backgroundColor: "#FF0000" }}> <TableCell& ...

cssreactjsmaterial-uireact-table

Creating an Image with a specified form action

echo "<img src=\"{$recipe['image']}\" height=100 width=100 /><br />"; echo '<form action="php/recipe.php?id='.$recipe_id.'&img='.{$recipe['image']'}.'" method="POST">'; echo ...

phphtml

Fancybox fails to open when clicking on the submit form

I am having an issue with the fancybox not appearing after submitting my form. Below is the code I have for the fancybox: <div class="hidden" id="fancybox-popup-form"> (your Fancybox content goes in here) </div> <style> .hidd ...

javascriptjqueryhtmlfancybox

Animating the background color within the Angular 4 side menu

In my quest to create an interactive user interface, I am looking to add animation effects to the background of my active element within a side menu. Here is the HTML code snippet I currently have: <ul> <li>Dashboard</li> ...

cssangular

Tips for rearranging sibling divs while maintaining the order of their child elements

Is there a way to shuffle the order of div classes shuffledv, while maintaining the same order of id's each time the page is refreshed? <div class="shuffledv"> <div id="2"></div> <div id="3"></div> <div id="1">< ...

javascriptjqueryhtmlcss

Instructions on making a Popup appear after a specified duration of mouse inactivity on a webpage

Hello, I am new to web development and could use some guidance on creating a popup window for users to enter their username and contact number. It should be able to store this information in a database and activate after the user has been idle for about 10 ...

jqueryhtml

What are the best techniques for creating a responsive UI design that adapts to all screen widths?

I created a UI by following some tutorials, but I'm facing an issue with responsiveness. When I resize the window, the UI doesn't look good or adjust properly. Here is the link to my fiddle: http://jsfiddle.net/X8HV9/1/show/ I am encountering tw ...

javascriptjquerycssjquery-mobile

Avoid using CSS browser prefixes when selecting plugins or addons

I tried searching on Google for a solution, but I couldn't find anything! Is there a trick or library available to avoid repeating CSS extensions for browsers? Instead of using -webkit-, -moz-, and -o- prefixes? -webkit-animation: NAME-YOUR-ANIMATI ...

jquerycss

After closing, Bootstrap Modal is designed to bring back focus to the last selected element

In my project, I have implemented focusable table rows that trigger a Bootstrap Modal to open. However, I have observed that when the Modal is closed, the focus is completely lost and begins again from the start. Is there a simple solution to avoid this i ...

bootstrap-4bootstrap-modalfocus