Methods for creating overlapping background images in breadcrumbs

I am having trouble with making the breadcrumb frame overlap the inside images. I attempted using z-index: -1, but it causes the images to disappear. Please refer to the attached image for a better understanding. Thank you. 

.breadcrumb {
    margin-bottom: 25px;
    margin-top: 0px;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    font-weight: bold !important;
    text-align: center !important;
    background-color: #ffffff;
}

.breadcrumb li {
  width: 181px;
  height: 140px;
  text-align: center !important;
  color: white !important;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-left: -30px;

}

.breadcrumb li:nth-child(1),.breadcrumb li:nth-child(2),.breadcrumb li:nth-child(3),.breadcrumb li:nth-child(4),.breadcrumb li:nth-child(5),.breadcrumb li:nth-child(6),.breadcrumb li:nth-child(7),.breadcrumb li:nth-child(8),.breadcrumb li:nth-child(9) {
  background:  url(asset-path("light_gray.png")) no-repeat right !important;
  background-size: cover !important;
  z-index: 1;
}
.breadcrumb a, .breadcrumb a:link,.breadcrumb a:visited {
    color: white;
    margin: 10px 0px 115px 30px;
    font-size: 13px;
    white-space: nowrap;
}
.breadcrumb li img {
  width: 131px;
    position: absolute;
    left: 19%;
    top: 22%;
    height: 100%;
    clip-path: polygon(0% 0%, 0% 0%, 81% 0%, 108% 26%, 40% 100%, 0% 81%, 0% 0%, 0% 0%);
    }

col-md-12{
  border: 2px solid black;
  padding: 10px;
  margin: -10px;
}
strong{
  text-transform: uppercase;
}
.doctor{
  padding: 0px;
}
.patient{
  padding: 0px
}

.breadcrumb > li + li:before {
    content: "  " !important;

}

.border{
  width: 100%
}

li .shadow, li .blue, li .orange, li .gray,  li .green {
  color: white !important;
}
}
 .left{
  border-left-color: #fe4e2d !important;
 }
    <ul class="breadcrumb">
            <li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=1">Conception</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=1"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/739/original/5EDAD5D1-E621-4DAF-BB33-C17554246FDA.jpeg?1679639265" alt="5edad5d1 e621 4daf bb33 c17554246fda">
    </a>            </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=2">Jig/BB/CT</a>
                </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=3">Pour/Mount</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=3"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/783/original/image.jpg?1681598393" alt="Image">
    </a>            </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=4">Teeth set up</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=4"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/784/original/image.jpg?1681598836" alt="Image">
    </a>            </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=10">Bar milling</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=10"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/781/original/image.jpg?1681512121" alt="Image">
    </a>            </li><li> <a class=" " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=11">Finalization</a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=11"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/816/original/CB1E55D8-9D9E-42F3-96EA-3C4486D9FCEF.jpeg?1682993428" alt="Cb1e55d8 9d9e 42f3 96ea 3c4486d9fcef">
    </a>            </li><li style="background: url(/assets/gray.png) no-repeat right !important; background-size: cover !important;"> <a class="gray " href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=13">Shipped </a>
                      <a href="/steptations?case_id=400&amp;doctor_id=19&amp;product_id=4&amp;step_id=13"><img title="" src="//mobileimplantlab.s3.amazonaws.com/step_images/image1s/000/002/817/original/455D15CB-9C78-40B7-A3D6-9E710565CCC4.jpeg?1682993522" alt="455d15cb 9c78 40b7 a3d6 9e710565ccc4">
    </a>    </li></ul>

https://i.stack.imgur.com/lFP6i.png

htmlcss

Answer №1

Applying z-index: -1; will effectively conceal the element as the image appears to be obscured behind it. To address this, each <li> element in the list should have a decreasing z-index assigned based on their position. For instance, starting with element1 = z-index: 10;, element2 = z-index: 9;, and so forth.

This task can also be automated through javascript to eliminate manual adjustments:

.breadcrumb li:nth-child(1){ z-index: 10 !important; }
.breadcrumb li:nth-child(2){ z-index: 9  !important; }
.breadcrumb li:nth-child(3){ z-index: 8  !important; }
.breadcrumb li:nth-child(4){ z-index: 7  !important; }
.breadcrumb li:nth-child(5){ z-index: 6  !important; }
.breadcrumb li:nth-child(6){ z-index: 5  !important; }
.breadcrumb li:nth-child(5){ z-index: 4  !important; }

Below is a javascript snippet that will automate this process for you:

// Grab all elements with the class .breadcrumb
const breadcrumbs = document.querySelectorAll('.breadcrumb li');

// Iterate through the breadcrumbs and assign the appropriate z-index value
breadcrumbs.forEach((item, index) => {

    // Calculate the z-index by subtracting the current index from the total number of crumbs
    const z = breadcrumbs.length - index;
  
    // Apply the calculated z-index using inline style
    item.style.zIndex = z;
});

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

I'm looking to create a unit test for my AngularJS application

I am currently working on a weather application that utilizes the to retrieve weather data. The JavaScript code I have written for this app is shown below: angular.module('ourAppApp') .controller('MainCtrl', function($scope,apiFac) { ...

javascripthtmlangularjsunit-testing

Update the table with information from a designated URL every 5 seconds

So here's the situation: I've got a dynamic HTML table <table id="example"></table>. The data displayed in this table changes according to the URL. Normally, my default URL looks like this: index.php?action=add To handle this, I&a ...

javascriptphpjqueryhtmlajax

What strategies can be used to ensure that the page layout adjusts seamlessly to even the smallest shifts in window size?

Of course, I am familiar with media queries and how they allow us to set specific min-width and max-width ranges for CSS changes. However, when I look at the website styledotme.com, I notice that the block/div beneath the navigation bar gradually shrinks ...

javascriptcssresponsive-designmedia-queries

What are the best practices for creating a contemporary website that functions effectively on IE7?

After creating several websites for my clients, I discovered that they are not functioning well in IE7. Unfortunately, there is still a small percentage of people using IE7. Can anyone suggest a super quick solution to fix this issue? Feel free to recomm ...

javascripthtmlcssinternet-explorer-7cascade-framework

Box-free calendar dash component

Encountering an issue within my application dashboard, here's a direct screenshot: https://i.stack.imgur.com/sEMrM.png The problem is that the Calendar days are extending beyond the borders of the calendar box. To implement this, I simply utilized ...

pythonhtmlcssplotly-dash

Bug with the animation of height in Jquery

Unfortunately, I can't share my entire source code here because it's quite lengthy. However, maybe someone can provide some insight into a common issue that may be happening elsewhere. The problem I'm facing is with a DIV element that has r ...

jqueryhtmlcssanimation

What could be causing the drop-down menu to function properly when offline but not when accessed on the server?

When visiting the website here and clicking on the contact link, you should see a Google map. However, for some unknown reason, it does not display. The strange part is that when I open the contact.html file directly, the map works perfectly fine. It seem ...

javajqueryhtmlcssbootstrap-4

how can I transfer model values to a dashboard in Rails 5?

I have developed an app that includes an adminlte dashboard. The dashboard is populated with various values obtained by a jQuery file. I am trying to pass module values to the dashboard. For example, the number of users shown in the dashboard should be fet ...

javascriptjquerycssruby-on-railsadminlte

Issue with the Bootstrap carousel jQuery plugin

Hi everyone, I need some help with creating a multiple items bootstrap carousel. I keep getting an error message that says "#Carousel".carousel is not a function TypeError: "#Carousel".carousel is not a function. Can anyone guide me on how to fix this issu ...

javascriptjquerycsstwitter-bootstrap

Ways to access Windows Explorer by clicking on a link?

Is there a way to access a folder in Windows Explorer directly from an HTML website using a hyperlink? Currently, the following code only opens the folder within the web browser: <a href="file:///folder">Open Folder in Windows Explorer</a> ...

htmlwindows-explorer

Trouble with highlighting the chosen menu item

I have been attempting to implement this code snippet from JSFiddle onto my website. Although I directly copied the HTML, used the CSS inline, and placed the Javascript in an external file, the functionality does not seem to be working properly. Feel free ...

javascriptjqueryhtmlcss

Can an ID and a "<?php echo ''.$variable.'' ?>" be included in the same input or video tag?

I have a task where I need to insert various Ids into a single video input tag. Specifically, I need to include the player and its row ids from PHP in this format: <video preload controls playsinline id="player[<?php echo ''.$row5['id ...

javascriptphphtml

The current version of HTML5 Context Menus is now available

I'm in need of implementing the HTML5 Context Menu feature. Currently, only Firefox supports it. My main objective is to add some menu options without replacing the existing context menu. How can I achieve the same functionality now? I am aware of va ...

javascripthtmlcontextmenu

A guide on how to activate an event when a radio button is selected using jQuery

I experimented with implementing this. When I try clicking on the radio button, the code functions correctly, but the radio button does not appear to be checked and remains unchanged. Any ideas on how to resolve this issue? <p> <input id="p ...

javascriptjqueryhtml

Is there a way to manipulate a website's HTML on my local machine using code?

I am currently working on a project to create a program that can scan through a website and censor inappropriate language. While I have been able to manually edit the text using Chrome Dev tools, I am unsure of how to automate this process with code. I ha ...

javascriptpythonhtmlbeautifulsoup

Expansive dropdown menu stretching across the entire width, yet the content within restricted to a width of

I have recently made some updates to our website's dropdown menu, expanding the results displayed. However, I would like the dropdown contents to fit within the width of our page. I have tried adjusting the CSS with limited success: .menu > ul > ...

htmljquerycss

Exploring Django's view field for efficient data rendering

Is it possible to display multiple views for a single page/template? For instance, imagine a website where users can submit movie reviews and read others' reviews as well. Now, I need to add an edit button to the review pages but only want the button ...

htmlcssdjangoweb

Unable to append HTML table row to designated table

I am trying to populate an HTML table with the JSON string data I receive. The object data seems correct, but for some reason, it is not getting appended to the table. Can you help me identify what's wrong with my jQuery append statement? functio ...

javascriptjqueryhtmlajax

Looking for assistance with removing hardcoding in HTML and jQuery?

Currently working on a biography page for my company's website that features a grid layout of the employees' profile pictures. Each picture should be clickable, causing the screen to fade to gray and display an overlay with the respective person& ...

javascriptjqueryhtml

Ensure that the navbar remains within the container as you scroll down the page

With the implementation of bootstrap 4, I have successfully integrated a fixed navbar inside a container. Initially, at the top of the page, it occupies the full width, but as soon as I start scrolling, it smoothly transitions into the confines of the cont ...

htmlcss