I have a problem with 2 divs dividing a container in 2 width 50% width.
When hovering over one it extends to 60/40%.
The problem is: While hovering over 1 (So it is extended) then quickly hovering over the other, the z-index is clipping.
check out this fiddle for an example:
https://jsfiddle.net/h9vs79as/
I need the new transition to fire after the reversing transition has ended...
HTML
<div class="container">
<div class="one">div 1</div>
<div class="two">div 2</div>
</div>
CSS
.container { height: 200px; width: 500px; position: relative; }
.container div { position: absolute; height: 200px; width: 50%; z-index: 100; transition: all .5s ease; }
.one { left: 0; background-color: #00ff00; }
.two { right: 0; background-color: #ff00ff; }
.container div:hover { width: 60%; z-index: 150; transition: all .5s ease; }
You can do this with flexbox and no positioning or z-index:
.container {
height: 200px;
width: 500px;
position: relative;
display: flex;
}
.container div {
flex: 1 1 50%;
transition: all .5s ease;
}
.one {
background-color: #00ff00;
}
.two {
background-color: #ff00ff;
}
.container div:hover {
flex: 0 0 60%;
transition: all .5s ease;
}
<div class="container">
<div class="one">div 1</div>
<div class="two">div 2</div>
</div>
Related
I've been struggling to hover to work. All this should do is have a red container div and when you hover it, a black inner div drops down from the top to block the container. I must be doing something basic wrong here.
HTML:
<div class="container">
<div class="inner" />
</div>
CSS:
.container {
position: relative;
width: 200px;
height: 200px;
background: red;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 0;
background: black;
transition: max-height 2s ease-out;
overflow: hidden;
}
.container:hover .inner {
max-height: 200px;
}
As mentioned by Temani Afif, this was nothing more than missing a height.
If you hover over the box in my example, then the color of the small box changes slowly from red to yellow. But if you stop hovering then it immediately jumps back to red.
.container { position: relative; background: black; width: 200px; height: 200px; }
.subcontainer { position: absolute; bottom: 10px; width: 100%; height: 20px; background: red; animation-duration: 2s; }
.container:hover .subcontainer { background: yellow; animation-duration: 2s; animation-name: example; }
#keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
<div class="container">
<div class="subcontainer">
</div>
</div>
How can I prevent this instant color change? I tried to add animation-duration: 2s; to .subcontainer as well, but it does not work.
You need a transition defined in the .subcontainer instead of an animation
.container {
position: relative;
background: black;
width: 200px; height: 200px; }
.subcontainer {
position: absolute;
bottom: 10px; width: 100%; height: 20px;
background: red;
transition: background 2s 0s }
.container:hover .subcontainer { background: yellow; }
<div class="container">
<div class="subcontainer">
</div>
</div>
I'm trying to create the effect of an opening door in css.
The issue I'm having is that the part which rotates also slides along the y axis. A door has a fixed rotation point, which is not really working here.
How can I prevent this sliding and ensure that the right part of the div .mover stays fixed to the right of the div .door?
.door {
background-color: blue;
width: 100px;
height:100px;
margin-left: 300px;
display: block;
}
.mover {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
transition: all 1s ease;
}
.door:hover .mover {
transform-origin: 100% 40%;
transform: rotate3d(0,1,0,180deg);
}
<div class="door">
<div class="mover">a</div>
</div>
Move the transform-origin to the base .mover selector, instead of the .door:hover .mover selector. Like this:
.door {
background-color: blue;
width: 100px;
height:100px;
margin-left: 300px;
display: block;
}
.mover {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
transition: all 1s ease;
transform-origin: 100% 40%;
}
.door:hover .mover {
transform: rotate3d(0,1,0,180deg);
}
<div class="door">
<div class="mover">a</div>
</div>
I am trying to make a div change its position when the user is hovering another div. The div that triggers the move is not parent nor adjecent to the div that shall move. Can this be done with css or do I need to go for js?
Here is the code:
.container{
display: inline-block;
}
.redOnTop{
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
.smallBlueBehind{
display: inline-block;
position: relative;
left: -55px;
width: 50px;
height: 100px;
background: blue;
transition: 1s;
z-index: -10;
}
#redLeft:hover + #blueLeft{
transition: 1s;
left: -5px;
}
#showingArea{
display: inline-block;
position: relative;
//overflow: hidden;
width: 50px;
height: 100px;
left: -5px;
border: 1px solid black;
}
//------------------------------ HOW TO WRITE HERE!
#redRight:hover #blueRight{
transition: 1s;
left: 0px;
}
<div class="container">
<div class="redOnTop" id="redLeft">
</div>
<div class="smallBlueBehind" id="blueLeft">
</div>
</div>
<div class="container">
<div class="redOnTop" id="redRight">
</div>
<div id="showingArea">
<div class="smallBlueBehind" id="blueRight">
</div>
</div>
</div>
As you can see I want the right blue square slide out from under the red square and end up in the black-bordered box when hovering said red square. Same as the left one.. only difference is that I want it inside the black box.
Here is a codepen if someone likes that better.
Any suggestions are appreciated! Thank you.
You can use adjacent selector and then target the blue rectangle...
#redRight:hover + #showingArea #blueRight{
transition: 1s;
left: 0px;
}
.container {
display: inline-block;
}
.redOnTop {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
.smallBlueBehind {
display: inline-block;
position: relative;
left: -55px;
width: 50px;
height: 100px;
background: blue;
transition: 1s;
z-index: -10;
}
#redLeft:hover + #blueLeft {
transition: 1s;
left: -5px;
}
#showingArea {
display: inline-block;
position: relative;
//overflow: hidden;
width: 50px;
height: 100px;
left: -5px;
border: 1px solid black;
}
#redRight:hover + #showingArea #blueRight {
transition: 1s;
left: 0px;
}
<div class="container">
<div class="redOnTop" id="redLeft">
</div>
<div class="smallBlueBehind" id="blueLeft">
</div>
</div>
<div class="container">
<div class="redOnTop" id="redRight">
</div>
<div id="showingArea">
<div class="smallBlueBehind" id="blueRight">
</div>
</div>
</div>
codepen
.box {
width: 100px;
height: 100px;
background: blue;
}
.circle {
margin-top: 20px;
width: 80px;
height: 80px;
border-radius: 100%;
background: red;
opacity: 0;
transition: opacity 0.5s ease;
}
.box:hover + .circle {
opacity: 1;
}
<body>
<div class="box">
</div>
<div class="circle">
</div>
</body>
Here, when I hover over .box, .circle fades in in 0.5s.
Now when I move my cursor away from .box, I want .circle to fade out at a different speed (say, 1s). How to make it happen?
You need to set the off duration on the non-hover state, and the on duration on the hover.
That is because once you hover, the :hover properties take precedence (assuming your selectors are correctly specified), so the duration you have for hover will apply.
Once you hover off, the properties set on the normal element apply.
.box {
width: 100px;
height: 100px;
background: blue;
}
.circle {
margin-top: 20px;
width: 80px;
height: 80px;
border-radius: 100%;
background: red;
opacity: 0;
transition: opacity 2s ease;
}
.box:hover + .circle {
opacity: 1;
transition-duration:0.5s
}
<div class="box"></div>
<div class="circle"></div>