Adjust the z-index value once the CSS3 transition has completed

Is it possible to adjust the z-index of a div once the opacity transitions have completed, using only CSS3 properties?

Is there a way to achieve this?

Here is the CSS3 code snippet:

.high-light{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.61);
    opacity:0;
    left: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    transition: opacity 0.3s linear;
    z-index: 1;
}


.high-light.high-light-active  { 
    opacity:1;
    z-index: 1;
}

Note: When the div has the class high-light-active, I want the transition to occur first, followed by the change in the z-index value.

css

Answer №1

One interesting technique involves utilizing the third parameter of the transition property, which is the delay value:

h2 {
  background: rgba(255,192,192,.7);
  padding: 1em;
  margin: 0;
}
div {
  position: fixed;
  padding: 20px;
  background: #888;
  color: #fff;
  z-index: -1;
  opacity: 0;
  transition: opacity 1s, z-index .2s 1s;
  margin-top: -10px;
}

h2:hover + div {
  z-index: 1;
  opacity: 1;
}
<h2>Hover to see the transition</h2>
<div>Changing</div>

Answer №2

Indeed, it may seem a bit cheesy, but adding some animation can bring it to life:

.highlight-active {
    animation: animate 5s forwards;
}

@keyframes animate {
  0% {
    opacity: 0;
    z-index: 0;
  }
  99% {
    opacity: 1;
    z-index: 0;
  }
  100% {
    z-index: 1;
  }
}

This code essentially creates an animation where the opacity property changes at 99%, followed by a modification of the z-index.

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

Only IE has a different margin-top effect on hover in the slideshow - Check out the CSS & project link for more details

When hovering over the IE slideshow, it moves downward. Any suggestions on why this happens? Visit development.legendarylion.com for more information. Could someone provide insight on why the slideshow increases top margin when hovered over? Explore the ...

javascripthtmlcssinternet-explorerslideshow

Designing an HTML banner with 100% width and 660 pixels in height for optimal responsiveness

I am in need of a responsive banner that will be displayed at 100% width and 600px height on fullscreen. Below is the code I have: <style> /* default height */ #ad { height: 660px; width: 100%; } @media o ...

jqueryhtmlcss

The proper way to define the margin-left property for different browsers

I'm working on aligning a checkbox. When I use margin-left : 10px; //works well with IE The alignment looks good in IE. However, if I try using margin-left : 15px; //works better with chrome It looks proper in Chrome. Is there a way to find a so ...

javascripthtmlcss

Achieve synchronized move and rotation animations with CSS3 and Javascript

Exploring box2dweb has been a blast for me. The code snippet below is part of my step method that gets executed approximately 30 times per second. It currently works fine, but I'm wondering if there's room for improvement: var img = body.GetUser ...

javascriptcssbox2dweb

Leveraging Angular interpolation with the "ngIf" directive

In my table, I have a specific requirement for the first column to change color based on a variable within my class. For instance, within my DisplayProject.ts class, there is a property named indexOfColor DisplayProject.ts export class DisplayProject impl ...

htmlcssangulartypescript

Discovering the specific element that was clicked from a collection of elements

I'm dealing with a scenario where multiple divs share the same class. There is a dropdown that alters the background color of one of these divs when a certain option is selected (for example, option 2 changes div #2's background color). My dile ...

javascriptjqueryhtmlcss

Yii2 Gridview - Horizontal Scroll Bar at the Top of the Page

I found a helpful post on Stack Overflow about creating a Yii2 Gridview with a fixed first column (Yii2 : Gridview with fixed first column), and now I'm looking to add a horizontal scrollbar at the top of the grid. My users really appreciate being ab ...

cssgridviewyii2

Manipulate container (div) to reveal and conceal

My jQuery was working fine until I added some more divs to my HTML. I'm now trying to toggle the opening and closing of a discussion container named discussionContainer with a click on the button replyButton. Any assistance would be highly appreciated ...

jqueryhtmlcssangularjs

Performing calculations involving both select and checkbox input values, as well as handling negative numbers

Seeking assistance in creating a feature where users can select a billing term from a dropdown and then choose checkboxes to add to the total. While it works fine on JSFIDDLE, I encounter issues on my website - specifically when selecting all checkboxes, r ...

javascriptjqueryhtmlcsscheckbox

"Customizing the WordPress header with a unique logo and sleek menu design

I am currently in the process of designing a WordPress website with a top header bar and a logo in the header. I would like the header of my site to have a specific look, similar to the one shown in the first image below: https://i.sstatic.net/KUR98.jpg ...

wordpresshtmlcssmenu

Is there a way to adjust the width of a Material UI / React table?

Currently developing an application using React.JS and Material UI. Utilizing the table component for my project, I have been successful in adjusting the column width but encountered difficulties when attempting to modify the overall table width. The goa ...

cssreactjsmaterial-ui

Enhance your user interface with Boostrap select icon spacing

Hello, I am currently experiencing an issue with my code where there is a space between the icon on the left and the field. I need to remove this space, does anyone have any ideas on how to do this? Thank you! <div class="col-auto"> <label c ...

htmlcssbootstrap-4

How wide should the website layout be?

What is the perfect size for a standard portal website? I've seen many sites with widths ranging from 960px to 1000px. ...

css

Is it possible to customize the width of dataLabels connectors for each individual slice in a pie chart?

Highcharts documentation states that the connectorColor can be defined within individual point properties. I am interested in implementing a similar approach for the connectorWidth property. I aim to customize the width and style of connectors based on th ...

csshighchartspie-chart

What is the best way to display a menu at the location of a mouse click?

Trying to display a custom menu at the location of a mouse click within a div, but it doesn't seem to be working as expected. The visibility logic works fine, but when clicking on the div, the menu only opens under the Typography element. Should the M ...

javascriptcssreactjstypescript

Encountered an issue when trying to generate a shader cache entry- there was an error when attempting to locate an

Today, I decided to write a basic Python script utilizing Selenium that would identify an element by its Css selector. My target? The input field on the Google webpage, specified by input[name=q] Upon running the script, Chrome opened as expected but prom ...

pythoncssseleniumselenium-webdriverselenium-chromedriver

implementing a fixed header in HTML

I am facing a challenge where I have a header with dynamic height and fixed position. My goal is to position the container div right below the header. However, since the header height varies, using a fixed value for margin-top is not feasible. Any sugges ...

jqueryhtmlcss

Using JavaScript to open a new window and display CSS while it loads

I am looking to utilize a new window for printing a portion of HTML content. var cssLink = document.getElementByTagName('link')[2]; var prtContent = document.getElementById('print_body'); var WinPrint = window.open(' ...

javascriptjqueryhtmlcssgoogle-chrome

What is the best way to display a red cross on a button?

Could you please help me add a red cross (font awesome icon) to the button? I attempted to implement the code on JSFiddle. However, I still need: UPDATE Initially, I found Kiranvj's answer suitable for its simplicity and applicability to all r ...

htmlcssbuttonfont-awesomefont-awesome-5

What is the best way to position one div above another div?

I'm struggling to move the div containing the product name, amount, price, and total to the top of its parent div. Changing the position and vertical alignment properties have not been effective. I've attached a screenshot of the page where the b ...

htmlcssbootstrap-4