Displaying images above a Bootstrap Carousel

I am looking to create a dynamic mobile image slider using Bootstrap carousel with overlaying images. However, I am facing two issues with responsive resizing and the overlapping of sections due to absolute positioning.

<section>
    <h2 style="text-align: center;">Interactive Mobile Experience</h2>
    <div class="row" style="margin: 50px 0;">
        <div class="col-6" align="center">
            <div class="carousel slide" data-ride="carousel" style="position: absolute; left: 0; height: 100px; width: 50px;">
                <div class="carousel-inner">
                    <div class="carousel-item active" data-interval="1000">
                    <img src="resources/assets/images/oneplus6_phone_blue_screen.png" style="height: 100px;">
                </div>
                <div class="carousel-item" data-interval="1000">
                    <img src="resources/assets/images/oneplus6_phone_red_screen.png" style="height: 100px;">
                </div>
            </div>
            <img src="resources/assets/images/oneplus6_phone.png" style="position: absolute; top: 0; left: 0; height: 100px;">  
        </div>
    </div>
</section>
<section>
    <div class="row align-items-center justify-content-center">
        <div class="col-lg-4">
            <h2>Let's Collaborate on Innovative Ideas!</h2>
            <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8c1c6cec7e8cdd0c9c5d8c4cd86cbc7c5">[email protected]</a>?Subject=Website-Contact%20Form" target="_top"><button type="button" class="btn btn-outline-danger heartbeat">Get in Touch!</button></a>
        </div>
    </div>
</section>
htmlcssimagebootstrap-4

Answer №1

Feel free to utilize the following code snippet

<!doctype html>
<html lang="en>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <!--Carousel Wrapper-->
  <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
    <!--Indicators-->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-2" data-slide-to="1"></li>
      <li data-target="#carousel-example-2" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->
    <!--Slides-->
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <div class="view">
          <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
          <div class="mask rgba-black-light"></div>
        </div>
        <div class="carousel-caption">
          <h3 class="h3-responsive">Light mask</h3>
          <p>First text</p>
        </div>
      </div>
      <div class="carousel-item">
        <!--Mask color-->
        <div class="view">
          <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
          <div class="mask rgba-black-strong"></div>
        </div>
        <div class="carousel-caption">
          <h3 class="h3-responsive">Strong mask</h3>
          <p>Secondary text</p>
        </div>
      </div>
      <div class="carousel-item">
        <!--Mask color-->
        <div class="view">
          <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
          <div class="mask rgba-black-slight"></div>
        </div>
        <div class="carousel-caption">
          <h3 class="h3-responsive">Slight mask</h3>
          <p>Third text</p>
        </div>
      </div>
    </div>
    <!--/.Slides-->
    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    <!--/.Controls-->
  </div>
  <!--/.Carousel Wrapper-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Answer №2

To solve the issue, consider adjusting the z-index values. You could assign a value of 1 to the slider (assuming it's the background) and a value of 2 or higher to the mobile image. Alternatively, you could switch the z-index values to ensure the slider appears above the mobile image.

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

Instructions on utilizing the CSSStyleSheet.insertRule() method for modifying a :root attribute

Is it possible to dynamically set the background color of the :root CSS property in an HTML file based on a hash present in the URL? The code provided does change the background color, but unfortunately, the hash value doesn't persist as users navigat ...

javascripthtmlcssurl

Ways to eliminate excess space at the top of a page while utilizing float elements

After doing some research online, I've come across advice on how to remove the space at the top of a web page which usually involves setting the margin and padding of the body element to 0: body { margin: 0; padding: 0; } You can find more i ...

htmlcss

What is the best way to make sure my navigation menu adapts to changes in my div size

Just curious, how can I make my navigation menu adjust its width to match the div box? Any help would be appreciated! If you'd like to see an example, here's a jsfiddle link: http://jsfiddle.net/AtM2Q/ Below is the code snippet: <html> & ...

htmlcssnavbar

What is the best way to responsively scale multiple overlay images in CSS?

I am facing an issue with multiple images overlaid on top of a background in my web design. Here's a sample code snippet that showcases the problem: <div style="position: relative; left: 0; top: 0;"> <img src="images/background.png" styl ...

htmlcsstwitter-bootstrapresponsive-design

Tips for evenly spacing items in a navigation bar

I'm having trouble centering the logo on the navbar as it always leans more towards the left. Is there a way to resolve this problem using Bootstrap classes? The navbar consists of a dropdown toggle button on the left, the logo in the center, and two ...

htmlcssbootstrap-4

The entire title serves as a hyperlink, not just the text portion

Apologies if I'm making mistakes, I'm just starting out with coding and navigating this website. So here's the deal: I am trying to add advertisements to my website on the left and right sides of the centered "Logo" at the top. The issue i ...

htmlcssheader

Preventing automatic recompilation in Angular when there are changes in the assets folder

I am facing an issue while attempting to download a file generated from a Spring Boot application in the assets folder of an Angular project. Every time I call the Spring API from Angular services, the Angular CLI recompiles the project after creating the ...

htmlangularspring-bootlivereload

React powered interactive tables

I am in the process of creating a dynamic table using React, and here is the data structure I am working with: { numRows: 2, numCols: 3, cells: [ { id: 1, pos: { row: 1, col: 1 }, content: 'This is th ...

javascripthtmlreactjshtml-table

Prevent the use of repetitive borders by utilizing display: inline-block

I've been experimenting with the behavior of div elements when used as a table, rather than using the traditional table element or display properties. The main reason for this is that I have found tables and display properties to be problematic for my ...

htmlcssflexboxcss-tables

Maintain the background color of the form select drop down even after clicking away from the form

I have customized a dropdown menu. <select name="country"> <option value="Andorra">Andorra</option> <option value="Albania">Albania</option> <option value="Armenia">Armenia</option> <opt ...

css

Position the image, text, and header within a box in uniform alignment

Currently, I am working on a design that includes an image, a header, and some text inside a box. However, I am facing an issue with aligning the header so that it appears above the rest of the text. The layout is not turning out as expected. https://i.ss ...

htmlcss

The new Facebook login button in my app seems to be glitchy as it fails to redirect users to the appropriate page after

I am working on a web application and have successfully integrated Facebook login from developers.facebook.com. However, I am facing an issue where after the user logs in with their Facebook credentials, they are not redirected to my application. Additiona ...

javascriptfacebookhtmlfacebook-graph-api

"An issue arises with jqPlot axes and legend when exporting images, as they are not rendering

After successfully rendering my jqPlot, I encountered an issue when exporting it as an image. The axes text and legend labels aren't displaying correctly in the exported image - the text seems to be shifting. Here's a comparison of the actual plo ...

jquerycssimagejqplot

How come it functions with $scope but fails with `this`?

I am trying to figure out why my code only works with scripts 1 and 3, but not with script 2. I need this functionality for my project because I can't use $scope. Thank you!! <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19 ...

javascripthtmlangularjsscopeangularjs-scope

Dynamic stylesheet in Vue component

Currently, I am utilizing a Vue component (cli .vue) and facing the challenge of selectively displaying my stylesheet based on a boolean value. To put it simply: When myVar==false, the component should not load its styles. <style v-if="myVar" lang="sc ...

javascriptcssvue.jsvuejs2vue-component

Dynamic Menu Navigation (No Bootstrap Required)

My Navbar is working perfectly in the original mode but when the screen width is less than 950px, it displays the buttons stacked vertically. However, the dropdown button opens the dropdown content on the wrong side. I want the dropdown content to appear u ...

javascripthtmlcss

turn the cube shape into one with smooth, rounded corners

Does anyone know how to create a cube with rounded corners using three.js? I've heard it's not possible with CSS. Any guidance on how to achieve this? Check out this link for an example /* |------------------------------------------| | MelonHTM ...

javascriptjquerycss3dthree.js

Switch up the background hue of a multi-level dropdown menu in Bootstrap 5

Has anyone attempted to modify the background color in a multi-dropdown menu using Bootstrap 5? You can find the original code here. I am looking to change the background color for visited/active items in a multi-level dropdown menu. The code snippet belo ...

htmlcsstwitter-bootstrapbootstrap-5

Is there a CSS alternative to using <br clear=all> on divs that do not have set heights?

Back in the day, I used to rely on <br clear=all> at the end of a div, without specifying a height value in CSS, just to control its height. These divs would expand and contract based on the content within. Is there a more elegant approach to make ...

htmlcss

The use of "runat="server" in the HTML Head tag is preventing C# embedded code blocks from being converted to client-side code

After I included runat="server" in the head tag and added a CSS href with the value of <%= WebAppInstance %>, I noticed that the <%= WebAppInstance %> was not being converted to client-side code. To provide clarity on my question, please refer ...

c#htmlcssrunatserver