Enhancing the Bootstrap carousel slider with offset background content container

Apologies if the title seems a bit unclear. I want to clarify that I am working with the latest version of pure Bootstrap (https://getbootstrap.com/) and nothing more.

My goal is to replicate the layout shown in the following image for a client:

https://i.sstatic.net/iwtB8.jpg

Currently, I have this setup:

https://i.sstatic.net/JRrs4.png 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<section>
      <div class="col-md-8 offset-md-2">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt="">
              <div class="col-md-6 offset-md-6">
                <div class="carousel-caption d-none d-md-block">
                  <h2 class="p-2" style="text-align: left !important;">Title</h2>
                  <p style="text-align: left !important;">Lorem ipsum dolor amet cornhole venmo knausgaard locavore listicle cray cloud bread poutine beard flannel irony flexitarian skateboard food truck. Pork belly enamel pin gluten-free blue bottle readymade jianbing thundercats prism, DIY mlkshk single-origin coffee jean shorts sustainable lo-fi. Before they sold out freegan subway tile migas, pug pabst PBRB. Succulents asymmetrical dreamcatcher cronut, kogi poke keytar humblebrag. Flannel fanny pack DIY iceland everyday carry. PBRB chicharrones pitchfork microdosing, raclette direct trade scenester swag artisan messenger bag air plant. Kogi polaroid mumblecore cardigan beard humblebrag poke neutra tilde slow-carb snackwave art party.</p>
                  <p style="text-align: right !important;">Read More...</p>
                </div>
              </div>
            </div>
            
            [Remaining content omitted for brevity]

            
          </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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

My main challenge is implementing an overlay effect to partially mask the image behind the carousel controls and text. Any guidance on how to achieve this would be greatly appreciated. Can anyone provide some assistance...?

htmlcsssliderbootstrap-4

Answer №1

Two strategies come to mind for resolving this issue:

  1. One option is to create a tinted overlay within each slide individually. This method is simple to establish and ensures the correct sequence of the image, overlay, and caption text. However, the downside is that the tinted overlay moves with the image, while the carousel controls remain stationary.
  2. Another approach involves creating an overlay as a container for the carousel controls (i.e., .carousel-indicators, .carousel-control-prev, and .carousel-control-next). While this method may offer a more polished solution, it is also more intricate. This complexity arises from the fact that the overlay will be generated in a separate stacking context from where the .carousel-caption is located, making it challenging to maintain the proper visual hierarchy of the elements.

Here is my demonstration of the second approach.
I recommend viewing the live example on CodePen as the snippet functionality here may not work correctly.

/* Important for ensuring z-indexes function correctly */
.carousel-item {
    -webkit-perspective: initial;
    perspective: initial;
}

/* Adjusts the image offset */
.carousel-item img {
    padding: 1rem;
}

.carousel-panel,
.carousel-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
}

.carousel-panel {
    background-color: rgba(30,80,110,.334);
}
.carousel-overlay {
    /*
    Alternatively, you could apply a tint here and 
    remove the background color from `.carousel-panel`
    */
    /*background-color: rgba(30,80,110,.334);*/
}

.carousel-control-prev,
.carousel-control-next {
    align-items: bottom;
}
<div class="container">
    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
        <div class="carousel-inner">
            <div class="carousel-test"></div>

            <div class="carousel-item active">
                <img class="d-block w-100" src="http://via.placeholder.com/1920x1000" alt="">
                <div class="carousel-overlay">
                    <div class="carousel-caption d-none d-md-block">
                        <h2 class="py-2 text-left">Title</h2>
                        <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget finibus augue. Donec lobortis est a nisl interdum, in scelerisque purus gravida. Proin vel leo ac mi dignissim dapibus.</p>
                        <p class="text-right">Read More…</p>
                    </div>
                </div>
            </div>

            <!-- Additional carousel items go here -->
            
            <div class="carousel-panel">
                <ol class="carousel-indicators">
                    <li data-target="#carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel" data-slide-to="1"></li>
                    <li data-target="#carousel" data-slide-to="2"></li>
                    <li data-target="#carousel" data-slide-to="3"></li>
                </ol>

                <a class="carousel-control-prev align-items-end" href="#carousel" role="button" data-slide="prev">
                    <span class="mb-4"><i class="fa fa-angle-left fa-3x"></i></span>
                    <span class="sr-only">Previous</span>
                </a>

                <a class="carousel-control-next align-items-end" href="#carousel" role="button" data-slide="next">
                    <span class="mb-4"><i class="fa fa-angle-right fa-3x"></i></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

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

How can I make a div element match the height of an image and overflow without relying on

Here is the code that I am currently working with: https://codepen.io/allen-houng/pen/ExYKYdq Additionally, you can find a gist of the code snippet below: <div class="parent"> <div class="imageWrapper"> <img class="image" src="imageurl" ...

javascripthtmlcss

Trouble arises as the Raspberry Pi GPIO pins refuse to toggle

Encountering an intriguing issue here. I've developed a Python program to regulate the climate of a room with a web interface. While the program functions properly, upon restarting the Raspberry Pi, all GPIO pins are activated. It's only after ac ...

javascriptphppythonhtmlraspberry-pi

JavaScript and CSS animations out of sync in terms of timing

I've been encountering some issues. I have an array containing 5 lines of text that change with a timer, but it seems that the css timer animation might not be synced properly or my @keyframes slidesdown setup could be incorrect. The delay between te ...

javascriptcss

Can CSS be used to communicate to JavaScript which media queries are currently in effect?

Is there a way for Javascript to detect when a specific CSS media query is active without repeating the conditions of the media query in Javascript? Perhaps something similar to an HTML data attribute, but for CSS. For example: CSS @media (min-width: 94 ...

javascriptcssmedia-queries

The JSX element 'body' appears to be missing its closing tag

I'm currently in the process of developing a landing page using react.js. This particular page is designed for users who are not yet signed up to create an account if they wish to do so. Unfortunately, I'm encountering some errors, one of which p ...

javascripthtmlreactjs

When the playback of an HTML5 Audio element is halted, the complete file undergoes downloading

Currently, I am facing a situation where a web page contains numerous Audio elements, some of which have very long durations, up to approximately two hours. To handle these audio tracks, they are created and controlled using the following code: var audio ...

htmlgoogle-chromeaudio

Modify top position without affecting bottom alignment using CSS

I am currently working on a website that is designed to mimic a printable document. The layout consists of a header, body, and footer, with each element utilizing CSS for margin and height adjustments. The challenge lies in ensuring that the footer is alw ...

cssword-processor

Exploring the process of querying two tables simultaneously in MySQL using PHP

I currently have a search box in my PHP file that only searches from the "countries" table. However, I also have another table called "continent" and I would like the search box to retrieve results from both the "countries" and "continent" tables. Here is ...

javascriptphphtmlmysql

Creating an animated sidebar that moves at a different speed than the rest of the

I have a layout with a large sidebar and small content, where the "Fixed part" refers to sticky positioning. I'm attempting to achieve this using scrollTop, but the sidebar is causing some issues like this: The code should only be executed when the ...

javascriptjqueryhtmlcssfrontend

HTML text-indent is a way to add extra space to

I cannot understand why my text is not indenting properly. At the very bottom left corner, the "Educational Specifications" text is enclosed within a p element as follows: <p style="text-indent: 3em">Educational Specifications</p> Why doesn& ...

htmlcss

What could be the reason for the container div's height not being properly refreshed?

When adding elements to a container div with an initial height of 'auto', I assumed that the height would adjust based on the children elements added. However, this is not happening. Can anyone assist me in ensuring that the container div's ...

javascripthtmlcss

What is the best way to position a div to float or hover from the bottom after it has been

I am working on creating a menu where clicking it will reveal a submenu at the bottom, but I'm encountering an issue. Currently, in my code, the submenu is appearing from right to left before moving down. Here is my code: <meta name="viewport" co ...

javascriptjqueryhtmlcss

Issue "Invalid UTF-8" encountered while compiling sass using @import

Here is the structure of my project: project assets scripts styles app.scss bower_components node_modules public css app.css js bower.json gulpfile.js package.json I am using gulp-sass to compile app.scss into ap ...

csssassgulpzurb-foundation

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute

Here is the code snippet of my component: <template> <div id="something" class="card"> </div> </template> const height = 200; const width = 200; let graph = d3 .select('#something') .append('svg') ...

javascriptcssvue.jsd3.jssvg

Is there a way to incorporate text at the end of a row in HTML?

I have a photo and some text on my website. The photo is displayed on the left side, while the text appears nicely on the right side. Now, I am looking to include an additional block of text below the existing text. How can I accomplish this? What steps ...

javascriptcsshtml-table

Troubleshooting the Div Ordering Problem in Bootstrap 4

Currently, I am using Bootstrap 4 and facing an issue with the layout order. Despite searching for a solution extensively, I have not been able to get it right or find one in the archives. Here is what I need... For desktop view, the layout should appear ...

csstwitter-bootstrapbootstrap-4

Disable the display of meridian in the UI Bootstrap datetime picker

Currently, I am utilizing the ui-bootstrap-datetime-picker with angularJS. I am wondering if it is feasible to directly set the show-meridian options of the time-picker inside the timepickerOptions. ... <input type="text" class="form-control" ...

htmlangularjstwitter-bootstrap-3bootstrap-datetimepicker

Image expansion

I have a container element div that holds various content of unknown length. How can I add a background image that extends the entire length of the container since background-images do not stretch? I attempted to use a separate div with an img tag inside. ...

htmlcss

Disable automatic focus on first button in PrimeNG Dialog

I am looking for a way to stop the autofocus on the first input element when opening the PrimeNG dialog. <p-dialog header="User Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" (onAfterHide)="onDialogHide ...

htmlangularprimengprimeng-dialog

Using Rails to load an image from CSS

My current approach to loading an image is using this code: <div id="bglion"><%= image_tag("BG-LION6.png")%></div>, which successfully displays the image. However, I am interested in loading the image from a CSS file instead. After resea ...

cssruby-on-railslessasset-pipeline