transition issue: z-index over width
Question
I have 2 blocks that are each 50% of the page width. When I hover one of these 2 blocks, it then takes up 95% of the page and must go over the second (hence the increase in the z-index on hover). When I switch my cursor from one block directly to another, we notice that from a certain point, the animation of the width is overwritten by the change of the z-index.
I'm looking for a solution to make the animation take priority over the width, not the z-index, smoother effect and ideally without using javascript.
Here is my code:
HTML:
<div class="page-wrap">
<div class="horizontal__reveal">
<div class="horizontal__reveal__block horizontal__reveal__block-left">
</div>
<div class="horizontal__reveal__block horizontal__reveal__block-right">
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html {
background: #000;
color: #fff;
}
.page-wrap {
height: 100vh;
width: 100vw;
}
.horizontal__reveal {
position: relative;
height: 100%;
width: 100%;
background: red;
}
.horizontal__reveal__block {
cursor: pointer;
position: absolute;
top: 0;
width: 50%;
height: 100%;
z-index: 100;
transition: all 1s ease;
display: flex;
align-items: center;
justify-content: center;
}
.horizontal__reveal__block:hover {
z-index: 200;
width: 95%;
}
.horizontal__reveal__block-left {
background: blue;
left: 0;
}
.horizontal__reveal__block-right {
background: green;
right: 0;
}
You can see it live here .
1 answers
solution1
1 2022-09-10 12:57:03
You can do that with omitting z-index when hover occurs. Instead you can use Adjacent Sibling Selector (+) in your CSS as the code below:
* { margin: 0; padding: 0; } html { background: #000; color: #fff; }.page-wrap { height: 100vh; width: 100vw; }.horizontal__reveal { position: relative; height: 100%; width: 100%; background: red; }.horizontal__reveal__block { cursor: pointer; position: absolute; top: 0; width: 50%; height: 100%; z-index: 100; transition: all 1s ease; display: flex; align-items: center; justify-content: center; }.horizontal__reveal__block:hover { /*z-index: 200;*/ width: 95%; }.horizontal__reveal__block:hover +.horizontal__reveal__block { width: 5%; }.horizontal__reveal__block-left { background: blue; left: 0; }.horizontal__reveal__block-right { background: green; right: 0; }
<,doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no. initial-scale=1,0. maximum-scale=1,0. minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="page-wrap"> <div class="horizontal__reveal"> <div class="horizontal__reveal__block horizontal__reveal__block-left"> </div> <div class="horizontal__reveal__block horizontal__reveal__block-right"> </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.