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

Looping through PHP code to encapsulate HTML elements

As a newcomer to PHP, I appreciate your patience as I navigate this new language. My goal is to wrap a div around elements like the "h4" tag without disrupting the for loop. Is this achievable? Thank you. <?php $con=mysqli_connect("localhost","root"," ...

phphtml

Issues with CSS3 height transitions in a specific scenario

Check out this simplified version of my code on CodePen: http://codepen.io/anon/pen/pjZXob I am attempting to create a smooth transition in the height of the .destinationsTopicContent div, from 0 to auto. However, it is nested within a div that has visibi ...

htmlcss

Adding a new row to a table is causing issues with jQuery

var info = [{ "pin": "015-08-0011-000-01", "arp": "015-08-0011-000-01", "tin": "342-432-423-000", "firstname": "John", "middlename": "James", "lastname": "Jones", "suffix": "", "qtr": "1st ...

javascriptjqueryhtml

What is the best way to create a "tile-based board" for this game?

I am working on a project to create a board made up of tiles, but I am facing difficulty in filling up the entire board area. Currently, I have only managed to create 1 column of the board, as shown in the image. Can someone guide me on how to fill the ent ...

javascripthtmlcssweb

The background-repeat property in CSS appears to cease functioning when the container becomes too wide

Exploring various combinations of space and round values for background-repeat, I've discovered a way to utilize radial gradients to create a visually appealing dotted border on an element without having the dots cut off. .test { background-repeat: ...

csssafaribackground-imagebackground-repeat

I am experiencing issues with my button not responding when I click on the top few pixels

I've created a StackBlitz version to illustrate the issue I'm facing. It seems like the problem might be related to my CSS for buttons... Essentially, when you click on the button at the very top few pixels, it doesn't register the click an ...

css

Develop a container element with protective measures against external CSS styles impacting internal elements

As I work on integrating my webpage code into a large project, I have encountered an issue. The entire project code is contained within a div element inside the <main> tag. However, when I add this container div within the <main> tag, the pro ...

htmlcss

New HTML output is displaying strangely when using jQuery AJAX

My jQuery AJAX function retrieves new HTML content from a PHP script. The PHP script is functioning correctly and sending back the accurate HTML to jQuery. However, when I utilize the html() function, the displayed HTML is incorrect. To verify the returned ...

jqueryhtmlajax

Please send the element that is specifically activated by the onClick function

This is the HTML code I am working with: <li class="custom-bottom-list"> <a onClick="upvote(this)"><i class="fa fa-thumbs-o-up"></i><span>upvote</span></a> </li> Here is my JavaScript function for Upvot ...

javascriptphpjqueryhtml

Continue to run upon clicking the button in the Document Object Model

I want the code to constantly change instead of executing only once. By default, the button has a dark mode for text and the background color is pink. When you click the button, the background color changes to black and the text in the button turns into li ...

javascripthtmldom

Align labels and inputs to the right in the contact form

I'm having trouble aligning labels and inputs in my contact form. They need to be aligned to the right due to the Hebrew language. Here is a link to the fiddle of my code which is not working, you can see that the input boxes are not aligned. I need t ...

csswordpressright-align

degree of transparency when semi-transparent elements overlap

Imagine you have two <div> elements, one with an opacity of .5 and another overlaying it with the same opacity. What would be the combined opacity of the two? Interestingly, it's not as simple as, .5 × .5 or even, .5 + .5 How can this ...

htmlcssmathtransparency

Activate on click using JavaScript

When a link with the class .active is clicked, I want to use a JavaScript function to deactivate any other active links. The structure of the code should be as follows: <ul class="product"> <li><a href="#myanmar" class="active">Mya ...

javascriptjqueryhtmlcssonclick

Creating Spinning Text Effects in Internet Explorer with CSS

Inside a list item (<li>), I have some text that I want to rotate 270 degrees. Direct methods in FireFox, Safari, Chrome, and Opera work fine for this, but when it comes to IE, there is no direct support. I've tried using filters like matrix and ...

cssinternet-explorer

One problem with placing Bootstrap columns inside another column

Currently, I am in the process of working on a website that requires a description section. To achieve this, I decided to use two Bootstrap columns – one with a size of 8 and another with a size of 4, totaling up to 12 grid units. Inside the column sized ...

htmlcsstwitter-bootstrappositioncss-position

`Scrolling through a horizontal menu with no scrollbar present`

Is there a way to create a horizontal menu that can scroll left or right without the scrollbar? I'm looking for a solution like adding on-screen arrow buttons or implementing mouseover functionality. What would be the best approach? div.scrollmenu ...

javascriptjqueryhtmlcssscroll

Generate a dynamic vertical line that glides smoothly over the webpage, gradually shifting from one end to the other within a set duration using javascript

I have designed a calendar timeline using html. My goal is to implement a vertical line that moves from left to right as time progresses, overlaying all other html elements. This functionality is similar to Google Calendar's way of indicating the curr ...

javascriptjqueryhtmlcss

Using XSLT to convert HTML into the desired text format

It has been almost two decades since my last encounter with XSLT. I am attempting to transform documents, like the HTML snippet below, into the desired output. <p> おばあさんは、とても <ruby><rb>喜</rb><rp>(</rp ...

htmlxmlxslt

Internet Explorer displaying incorrect shadow effects (paper curl) with CSS

I am attempting to achieve a page curl effect similar to this one: https://i.stack.imgur.com/grS7p.png I have followed the example provided here: http://codepen.io/anon/pen/fpjoa When I create new PHP and CSS files and copy-paste the code from the afore ...

htmlwordpresscssinternet-explorer

"Optimizing XSL stylesheets by implementing conditional row styles to prevent redundant

Is there a way to display rows that are older than 2 years from today in bold without repeating the code? I know the condition I need, but I'm struggling with avoiding duplicating all the code just for a different style. This is the code I have: & ...

cssxslthtml-tablexslt-1.0