I have 2 divs positioned horizontally next to each other inside a container. I want each div to expand width on hover to the full width of the container.
The problem is that after the transition when the pointer is no longer hovering the left div (which is first in the html flow) is overlapped under the right div.
Here's an example.
To recreate just place the pointer on the left div until the transition is finished, then take the pointer off the div.
The desired effect is that the width will decrease gradually (just like the right div).
* { margin: 0; padding: 0; }
#wrap { position: relative; width: 500px; margin: 0 auto; }
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; }
#one { width: 300px; background: #49d7b0; }
#two { right: 0; width: 200px; background: #d8c800; }
#one:hover, #two:hover { width: 500px; z-index: 1; }
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="z-index.css">
</head>
<body>
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>
animation can do the trick here. Actually z-index cause the issue here. You can solve following way.
* { margin: 0; padding: 0; }
#wrap { position: relative; width: 500px; margin: 0 auto; }
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; }
#one { width: 300px; background: #49d7b0; animation: movedec 1s; }
#two { right: 0; width: 200px; background: #d8c800; }
#one:hover { animation: moveinc 1s forwards; -webkit-animation: moveinc 1s forwards; }
#two:hover { width: 500px; }
#keyframes moveinc {
from {width: 300px; z-index: 1;}
to {width: 500px; z-index: 1;}
}
#keyframes movedec {
from {width: 500px; z-index: 1;}
to {width: 300px; z-index: 1;}
}
#-webkit-keyframes moveinc {
from {width: 300px; z-index: 1;}
to {width: 500px; z-index: 1;}
}
#-webkit-keyframes movedec {
from {width: 500px; z-index: 1;}
to {width: 300px; z-index: 1;}
}
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
Set the z-index with more difference between the un-hovered and the hovered state (for instance, go from 1 to 10).
Add transition on the z-index also ... But only when going back to the default state.
This way, when you change the hover from one element to the other, the newly hovered element will have immediately the high z-index, while the un-hovered is slowly dreasing it. And the newly hovered element will be in front.
Demo: (with the key styles in first place)
#one:hover,
#two:hover {
width: 500px;
z-index: 10;
transition: width 1s ease-out, z-index 0s linear;
}
#one,
#two {
z-index: 1;
transition: width 1s ease-out, z-index 1s linear;
}
* {
margin: 0;
padding: 0;
}
#wrap {
position: relative;
width: 500px;
margin: 0 auto;
}
#one,
#two {
height: 100px;
position: absolute;
}
#one {
width: 300px;
background: #49d7b0;
}
#two {
right: 0;
width: 200px;
background: #d8c800;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="z-index.css">
</head>
<body>
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>
This isn't really a problem, just the way overflows have to work. You have 2 options:
1) Use CSS keyframe animations - that way, you can give the hovered div a higher z-index, and have the reverse animation keep the z-index higher (dropping it back to a lower index at the very end of the animation).
2) use javascript/jquery (if you want this to work well on all devices/browsers, I would recommend Jquery anyway, which gives support to older browsers like IE8 that don't support css3)
Related
Here is a link to a demo
I'm not sure what I'm missing, I've done this before a few times but It's been a day of fighting this particular CSS. I want the image to enlarge, but stay within the dimensions, so a zoom effect versus any enlargement. I've attempted to move the overflow:hidden into other parent or children, but it doesn't have an effect. I've played around with the display settings as well.
Any advice? The JSfiddle link is above, and the code below. Thanks for taking a look!
#purple-square {
width: 355px;
height: 255px;
background-image: url("../img/website_cards/purple_card.png");
border-radius: 10px;
}
#migraine-dentistry {
width: 355px;
height: 255px;
background-image: url("../img/website_cards/migraine_dentistry_card.png");
border-radius: 10px;
}
/* need position: relative in shell otherwisee the elements disappear */
#shell {
margin: auto;
width: 355px;
height: 255px;
position: relative;
transform-origin: center;
transition: 0.3s ease-in-out;
}
#shell:hover {
transform: scale(1.2);
}
#container {
width: 100%;
overflow: hidden;
display: inline-block;
transition: 0.3s;
margin: 0 auto;
}
#container div {
position: absolute;
left: 0;
transition: 0.3s ease-in-out;
}
#container:hover {
transition: ease-in-out 0.3s;
}
#container div.bottom:hover {
opacity: 0;
}
and here is the HTML setup:
<body>
<div id="shell">
<div id="container">
<div id='purple-square' class="top"></div>
<div id='migraine-dentistry' class="bottom"></div>
</div>
</div>
</body>
Full working code snipped below my steps
remove unnecessary elements Removed purple square, because it's never seen in wanted animation.
Removed the part the full #container div.bottom:hover part.
Removed every style that begins with #shell in the css and later trigger the animation on #container:hover.
main issue Add an #migraine-dentistry after the #container:hover animation, so if someone hovers the container it effects the #migraine-dentistry element. (#container:hover #mi.. {trans..})
In this (#container:hov..) element remove everything and
insert transform: scale(1.2);
because we just want to scale if user is hovering.
Remove whole #container div {..} style element, because we will directly add these styles to the #migraine-dentistry element.
In #container define px values for
> width: 355px; and height: 255px;
just because we not use the #shell element anymore. Also
> set position: relative; and z-index: 2;
that the #migrain.. element is inside his parent. And
> set border-radius: 15px;
for styling. Finally
>remove the display and transition values
because they are simply not needed.
last In #migraine-de.. styles
>set width: 100%; and height: 100%;
to fit div to parent.
> remove border-radius tag
because it's set by the #container
> add transition: 0.3s ease-in-out;
to transition like you wanted.
#container {
border-radius: 15px;
width: 355px;
height: 255px;
overflow: hidden;
z-index: 2;
position: relative;
}
#container:hover #migraine-dentistry {
transform: scale(1.2);
}
#migraine-dentistry {
width: 100%;
height: 100%;
transition: 0.3s ease-in-out;
background-image: url('https://images.unsplash.com/flagged/photo-1563248101-a975e9a18cc6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
}
<body>
<div id="shell">
<div id="container">
<div id='migraine-dentistry' class="bottom"></div>
</div>
</div>
</body>
I know these long nights where you just can't get it done.
How can I animate this div element so it starts at the top and ends at the bottom and then disappears something like a shooting star effect?
Currently, this code is going from top to bottom but it returns from bottom to top(I do not want this effect), I will like to start always from top all the way to the bottom, any suggestion?
css
div {
width: 100px;
height: 100px;
background: blue;
}
.St {
width: 5px;
height: 100px;
background: green;
position: relative;
animation: animateDiv 1s infinite;
}
#keyframes animateDiv {
0% {bottom: 0px; top: 50px; }
}
html
<!DOCTYPE html>
<html>
<head>
<body>
<div>
<div class="St"></div>
</div>
</body>
</html>
You should probably use animation-fill-mode:forwards which will end at the last frame. But you also need to better define your keyframes (add 100%), and finally it suits your case better to use position:fixed instead of relative.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
div {
width: 100px;
height: 100px;
background: blue;
}
.St {
width: 5px;
height: 100px;
background: green;
position: fixed;
animation: animateDiv 1s forwards;
}
#keyframes animateDiv {
0% {top:0;}
100%{top:100%}
}
<div>
<div class="St"></div>
</div>
The red element is disappearing while scrolling and I don't know what to do.
I am trying to do a custom scroll by element linked to parts of body.I don't know why this is happening. How do I fix it?
html{
margin: 0;
padding: 0;
height: 400%;
}
> This part of the code is working on a moving background stars
#keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-webkit-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-moz-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-ms-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
::-webkit-scrollbar {
display:none;
}
.stars, .twinkling, .clouds {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:400vh;
display:block;
}
.stars {
background:#000 url(stars-bg.png) repeat top center;
z-index:0;
}
.twinkling{
background:transparent url(twinkling-bg.png) repeat top center;
z-index:1;
-moz-animation:move-twink-back 600s linear infinite;
-ms-animation:move-twink-back 900s linear infinite;
-o-animation:move-twink-back 900s linear infinite;
-webkit-animation:move-twink-back 900s linear infinite;
animation:move-twink-back 900s linear infinite;
}
**code of far right element**
.cont{
height: 50%;
width: 96.5%;
float: left;
}
.conm{
height: 50%;
width: 3.5%;
float: left;
background-color: #0a0a0a;
top: 0;
position: sticky;
}
.point-tb{
height: 10px;
width: 10px;
border-radius: 100%;
border: 6.5px solid #f00;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50%;
}
.scroll-1{
height: 100px;
width: 8px;
background-color: #f00;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -5%;
}
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/b5945c3b13.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="stars"></div>
<div class="twinkling">
<div class="cont"></div>
<div class="conm">
<div class="point-tb"></div>
<div class="scroll-1"></div>
</div>
</div>
</div>
</body>
</html>
The red element is scrolling because of the following CSS properties.
html{
margin: 0;
padding: 0;
height: 400%; /* This Here */
}
.stars, .twinkling, .clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 400vh; /* and this here */
display: block;
}
Setting the html element to beyond 100% height is considered bad practice. Remove the height attribute from each and this will fix your problem.
html{
margin: 0;
padding: 0;
}
.stars, .twinkling, .clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
display: block;
}
Why is this happening? Most browsers by default will enable user scrolling whenever the HTML document extends passed 100% of the height or 100% the width. Since you are setting the html element and .stars, .twinkling, and .clouds to have a height value beyond 100%, the user can scroll down. When the user scrolls down the red element is moved up. The red element never moves, the page does.
If you attempting to create a custom slider I would wrap everything in a div, like this:
<div class="container">
<div class="scrollbar">
<!-- Scroll bar style elements. -->
</div>
<div class="content">
<!-- Content to be scrolled. -->
</div>
</div>
Then set the .content class to have a height property of beyond 100%. Then you can use JavaScript to animate your scrollbar element based on content scrolling offset. This method will require JavaScript and use of the position: fixed; or position: absolute; CSS property. This essentially will attach the element to a particular area on the screen and prevent it from moving unless you tell it to. You will also need to use overflow: hidden; to disable the browsers auto scroll functionality for the content element. You can read more about the position property and overflow property here by w3schools: https://www.w3schools.com/cssref/pr_class_position.asp,
https://www.w3schools.com/cssref/pr_pos_overflow.asp
--
Alternatively, if you main goal is just to style a custom scrollbar, look into ::scrollbar pseudo selector. You can read more about this here: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
--
In addition to the element, use /* Comment Here */ to insert CSS comments. Use <!-- Comment Here --> to insert HTML comments. I believe this was added after copying and pasting into stack overflow, but not using comments correctly can cause rendering issues.
Try to use position:fixed in you css.
This question already has an answer here:
left-right movement.. css only very generic
(1 answer)
Closed 4 years ago.
I have the following HTML:
.container {
width: auto;
height: 32px;
background-color: gray;
display: inline-block;
padding: 4px 8px;
min-width: 400px;
position: absolute;
}
.box {
padding: 0 6px;
height: 100%;
left: 0;
background-color: red;
width: auto;
display: inline-block;
line-height: 32px;
}
<div class="container">
<div class="box">HELLO</div>
</div>
I want to animate the div from right to left in only CSS. The issue is that the inner box has a variant width (due to translations).
If I could do an animation similar to
from {
right: 0;
}
to {
left: 0;
}
it would be exactly what I need, but unfortunately this doesn't work.
How can I animate the inner div with a variant width from left to right using only CSS. The outer div also has a variant width.
Edit:
I would like the inner div to never move outside the outer div.
This is not a duplicate because the inner AND outer container have a variant/unknown width.
You can do this by starting with right:100% and finish to right:0%
EDIT
I've achieve this by using 2 different methods :
by changing the right property and with using a calc() to prevent to box to go outside your container
Use a wrapper who have the width of your container minus the width of your box and use translateX property for your animation.
.container{
background-color:#ccc;
width:400px;
position:relative;
height:50px;
}
.big{
width:600px;
}
.test1 .box{
position:absolute;
width:100px;
height:100%;
right:calc(100% - 100px);
background-color:red;
animation:to-right-1 1s linear forwards;
}
.test2 .wrapper{
position:relative;
width:calc(100% - 100px);
height:100%;
animation:to-right-2 1s linear forwards;
}
.test2 .box{
width:100px;
height:100%;
background-color:red;
}
#keyframes to-right-1{
from{
right:calc(100% - 100px);;
}
to{
right:0px;
}
}
#keyframes to-right-2{
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}
<div class="test1">
<div class="container">
<div class="box">Hello</div>
</div>
<div class="container big">
<div class="box">Hello</div>
</div>
</div>
<div class="test2">
<div class="container">
<div class="wrapper"><div class="box">Hello</div></div>
</div>
<div class="container big">
<div class="wrapper"><div class="box">Hello</div></div>
</div>
</div>
After you define left and right in class.
transition-property: right, left;
transition-duration: 2s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s;
right can be done like
right:calc(100% - 400px)
and use this to make it bigger as you go.
#-webkit-keyframes big {
from { -webkit-transform: scale(.1,.1); }
to { -webkit-transform: scale(1,1); }
}
#keyframes big {
from { transform: scale(.1,.1); }
to { transform: scale(1,1); }
Use this fiddle as reference http://jsfiddle.net/MiKr13/aL7t2jvr/
}
You can use keyframes animation to animate'em.
.container {
width: auto;
height: 32px;
background-color: gray;
display: inline-block;
padding: 4px 8px;
min-width: 400px;
position: absolute;
}
.box {
padding: 0 6px;
height: 100%;
left: 0;
background-color: red;
width: 50px;
display: inline-block;
line-height: 32px;
}
.navr{position:absolute; z-index:55; text-align:center; margin:0 auto; bottom:0%; cursor:pointer;}
.navr {
-webkit-animation-name: bump;
-webkit-animation-duration: 0.3s;
-webkit-animation-iteration-count: 1;
animation-name: bump;
animation-duration: 2s;
animation-iteration-count: 1;
position:absolute;
left:0;
}
#keyframes bump {
0% {right:-100%;}
100% {right:85%;}
}
<div class="container">
<div class="box navr">HELLO</div>
</div>
If you use variant width you can use the element's width to position them.
Here the class .animated has a width of 50px; so we can move it's postion from left:100% to left:50px instead of giving left:0
because the element .animate has the absolute position. That's why we are giving it's width as position here.
.container {
position: relative;
width: 80%;
height: 50px;
border: 1px solid black;
}
.animated {
position: absolute;
width: 50px;
height: 100%;
background-color: red;
animation: .5s linear 0s slide 1;
}
#keyframes slide {
from { left: 100%; }
to {
left: 50px;
transform: translateX(-100%);
}
}
<div class=container>
<div class=animated>hello
</div></div>
Take a look at this fiddle: https://jsfiddle.net/cz1gusj6/1/
What i want to do is this bars to fit the screen size height, always.
This is the page: http://cl.ly/image/0o0e1W0X0n2Z/1-browser.jpg
This is what happens when i change the window height: http://cl.ly/image/410z3E0l420K/2-browser.jpg
This is what i want it to happen when i change the window height: http://cl.ly/image/0P3u1r0F2P1r/3-browser.jpg
I tried to assign a max-height to the div but that does not work because the content it's not images:
#container{
width: 100%;
height: 100%;
}
.container2{
max-height: 100%;
}
<div id="container">
<div class="container2">CONTENT (the bars)</div>
</div>
jsBin demo
Simply set your bars to a vh (viewport height) unit size.
Also you cannot have multiple ID inside a single page! id="progressbar" should be unique! So use class ..
Since you use vh now, don't use <br> tags, rather a margin (also in vh).
Set the Child of your progressbars to height:100%; (to fill the parent height)
If you have fixed number of bars, read on (I'm using 10 bars as an example).
DEMO: http://jsfiddle.net/8yrp8d9u/
HTML
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
<div class="progressbar"><span></span></div>
CSS
html, body {
height: 100%;
}
body {
background: #4086a4;
margin: 0;
}
.progressbar {
margin: 0 auto;
width: 30%;
height: 10%;
box-sizing: border-box;
border: 10px solid #4086a4;
border-width: 5px 0;
background: #7aabbf;
}
.progressbar span {
display: block;
width: 0;
max-width: 100%;
height: 100%;
background: white;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
}
#-webkit-keyframes progress {
from {} to {width: 100%}
}
#-moz-keyframes progress {
from {} to {width: 100%}
}
#-ms-keyframes progress {
from {} to {width: 100%}
}
#keyframes progress {
from {} to {width: 100%}
}
change container2 to:
.container2{
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: fixed;
right: 0;
top: 0
}