Is it possible to make a css transition that causes the width of one div to expand slide over another div instead of moving it out of the way?
Yes, it is possible, here are the HTML and the CSS
HTML:
<body>
<div class="overlord"></div>
<div class="target"></div>
</body>
CSS:
.target
{
z-index:-1;
position:fixed;
left:120px;
width:100px;
height:100px;
background:blue;
}
div.overlord
{
float:left;
z-index:999;
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div.overlord:hover
{
z-index:999;
width:300px;
}
JSFIDDLE
Related
I have div .list element with CSS below
.list{
bottom:0;
height:calc(100% - 85px);
left:50%;
max-width:600px;
padding-bottom:85px;
-webkit-transform:translate(-50%,-5%);
z-index:-1;
display:flex;
width:100%;
flex-wrap:wrap;
overflow-x:hidden;
overflow-y:scroll;
position:fixed;
justify-content:center;
opacity:0;
background-color:#f1f1f1;
}
I use JavaScript to add .anim class to this element which contains animation to open .list div element on click open button
document.querySelector('.list').classList.add('anim');
.anim class should animate opening .list using CSS animation.
.anim {
-webkit-animation:openlist 200ms ease forwards;
z-index:2
}
#-webkit-keyframes openlist {
0% {
-webkit-transform:translate(-50%,-5%)
}
to {
-webkit-transform:translate(-50%,0);
opacity:1
}
}
Problem with opacity: when I use Opacity outside CSS animation and put it inside .anim class after animation definition like below:
.anim {
-webkit-animation:openlist 200ms ease forwards;
z-index:2;
opacity:1;
}
.list div is scrollable without any problem but I don't get transition effect from opacity:0 to 1.
If I use opacity inside animation like below:
to {
-webkit-transform:translate(-50%,0);
opacity:1
}
Everything is working fine but .list div is not scrolling and scrollbar is hidden.
HTML
<body class="x">
<input type="search" class="s2" placeholder="Search...">
<div class="s1"></div>
<div class="c1"></div>
<div class="list"></div>
<img src="icons/heart.svg" id="m">
</body>
BODY CSS:
.x {
width:100%;
height:100%;
margin:90px 0;
overflow-x:hidden;
overflow-y:scroll;
}
Question: How to get CSS animation working with opacity inside and keep transition effect plus .list div scrollable?
I found a solution, problem was that i used opacity instead of filter:opacity, now i get opacity effect without scrolling problems
Im trying to make divs move up infinity loop, and i'm struggle with the keyframes settings.
Can anyone help me figure out where I'm wrong and correct my mistake, I'm sure it's something so simple I just did not notice it.
Thank you very much.
#container {
color:#999;
text-transform: uppercase;
font-size:60px;
font-weight:bold;
padding-top:200px;
position:fixed;
width:100%;
bottom:45%;
display:block;
}
#flip {
height:100px;
overflow:hidden;
}
#flip > div > div {
color:#fff;
padding:10px 12px 10px 12px;
height:65px;
margin-bottom:45px;
display:inline-block;
}
#flip div:first-child {
animation: show 5s linear infinite;
}
#flip div div {
background:#42c58a;
}
#flip div:first-child div {
background:#4ec7f3;
}
#flip div:last-child div {
background:#DC143C;
}
#keyframes show {
0% {transform: translateY(0);}
50% {transform: translateY(50%);}
100% {transform: translateY(100%);}
}
<div id=container>
ENDLESS
<div id=flip>
<div><div>SMOOTHIES</div></div>
<div><div>MILKSHAKES</div></div>
<div><div>FRUIT SHAKES</div></div>
<div><div>COCTAILS</div></div>
<div><div>FRUIT SHAKES</div></div>
</div>
OPTIONS!
</div>
You're animating the full view port, #flip.
Instead you can wrap all the divs in a container, #filp-container, and animate it.
Here is the full edited code with a comment for each change:
#container {
color:#999;
text-transform: uppercase;
font-size:60px;
font-weight:bold;
padding-top:200px;
position:fixed;
width:100%;
bottom:45%;
display:block;
}
#flip {
height:100px;
overflow:hidden;
}
#flip-container div {
color:#fff;
padding:10px 12px 10px 12px;
height:65px;
margin-bottom:45px;
/* this will break the aliging of divs */
/* display:inline-block; */
}
/* we are targeting the container */
#flip-container {
animation: show 5s linear infinite;
}
#flip div div {
background:#42c58a;
}
#flip div:first-child div {
background:#4ec7f3;
}
#flip div:last-child div {
background:#DC143C;
}
#keyframes show {
0% {transform: translateY(0);}
/* 50% is unnecessay */
/* 50% {transform: translateY(50%);} */
/* to animate to upward use -100% */
100% {transform: translateY(-100%);}
}
<div id=container>
ENDLESS
<div id=flip>
<!-- adding a container around divs and animating it instead of the view port -->
<div id="flip-container">
<!-- removed unnecessary surrounding divs -->
<div>SMOOTHIES</div>
<div>MILKSHAKES</div>
<div>FRUIT SHAKES</div>
<div>COCTAILS</div>
<div>FRUIT SHAKES</div>
</div>
</div>
OPTIONS!
</div>
The inner div has a variable height depends on the length of the text inside, which is always shorter than the outer div. I'd like the inner overlay div to slide up from top:100% to bottom:0 when the outer div is hovered. My CSS code below does not produce the slide up effect I want. It simply pops up the inner div at the bottom of the outer div.
<div class="outer">
<div class="inner">This is a content block.</div>
</div>
.outer {
position:relative;
background-color:#eee;
width:150px; height:150px;
overflow:hidden;
}
.inner {
position:absolute; z-index:10;
box-sizing:border-box; width:100%; padding:10px;
background-color:rgba(0,0,0,0.5); color:#fff;
left:0; right:0; top:100%; bottom:auto;
transition:top 300ms, bottom 300ms;
}
.outer:hover .inner {
top:auto; bottom:0;
}
your code cannot work because transition doesn't work from/to auto.
you could set bottom:0 by default and play with transfom, e.g.
.outer {
position:relative;
background-color:#eee;
width:150px; height:150px;
overflow:hidden;
}
.inner {
position:absolute; z-index:10;
box-sizing:border-box; width:100%; padding:10px;
background-color:rgba(0,0,0,0.5); color:#fff;
left:0; right:0; bottom:0;
transform: translateY(100%);
transition: transform 300ms;
}
.outer:hover .inner {
transform: translateY(0);
}
I have a div with an inner span with text. This inside span should be centered vertically and horizontally all the time:
http://jsfiddle.net/QW4Wk/
<div>
<span>Text aligned center</span>
</div>
The div has a transition when the mouse is over, which changes its width and height.
div{
width:200px;
height:200px;
background:black;
position:relative;
-webkit-transition:width 10s,height 10s;
}
span {
position:absolute;
color:white;
bottom:0;
right:0;
}
div:hover{
width:250px;
height:250px;
}
However in Chrome (at least) the text looks choppy while the transition is running. I guess this is because the transition goes 1 by 1px and therefor the "center style" has to go back and forward 1px.
Is there someway to fix this to look smoother, something like subpixel?
Thanks.
try this for absolute centering the text..
span {
margin: auto;
color:white;
text-align:center;
height:10px;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
and of course lessen your transition speed.
Apply a different change to the span. a transform can be subpixel
div{
width:200px;
height:200px;
background:black;
position:relative;
-webkit-transition:width 10s,height 10s;
}
span {
position:absolute;
color:white;
top:75px;
left:50px;
width: 100px;
transition: -webkit-transform 10s;
-webkit-transform: translate(0px, 0px);
}
div:hover{
width:250px;
height:250px;
}
div:hover span {
-webkit-transform: perspective(999px) translate(25px, 25px);
}
fiddle
I am trying to animate a DIV based on the hover state of an anchor tag, but nothing happens. Can someone tell me where I am going wrong? Demo at bottom.
.blue {
background-color: aqua;
display:block;
width:100px;
height:100px;
position:absolute;
margin-top:100px;
-webkit-transition(margin-top 2s ease-in);
}
a.yellow {
background-color: yellow;
display:block;
width:100px;
height:100px;
position:absolute;
margin-top:0px;
-webkit-transition(margin-top 2s ease-in);
}
a.yellow:hover + .blue {
-webkit-transition(margin-top 2s ease-in);
margin-top:400px;
}
<nav>
<a class="yellow" href="#">YELLOW</a>
</nav>
<div class="blue"></div>
DEMO: http://jsfiddle.net/liquidengine/btztS/
you can do this only if you put the element that you want to move , inside the element you want to be hovered.
Like:
<nav>
<a class="yellow" href="#"><div class="blue"></div>YELLOW</a>
</nav>
And CSS:
.blue {
background-color: aqua;
display:block;
width:100px;
height:100px;
position:absolute;
margin-top:100px;
-webkit-transition:margin-top 2s ease-in;
}
a.yellow {
background-color: yellow;
display:block;
width:100px;
height:100px;
position:absolute;
margin-top:0px;
-webkit-transition:margin-top 2s ease-in;
}
.yellow:hover .blue {
margin-top:400px;
}
As far as I know a + in css selects the first sibling. I dont think it does what you are trying to do.
Here is an example using jquery to change the background color onclick in jsfiddle
Jquery snippet for changing css
$(".yellow").hover(function () {
$(".blue").css("margin-top","300px");
$(".yellow").css("margin-top","400px");
});
http://jsfiddle.net/btztS/8/
Also I think you need to update your coding style somewhat. classe named blue and yellow really shouldn't exist, even in a demo. Plus in CSS you should really use hex or rgb to reference colors.
Here is the code you probably want...
http://jsfiddle.net/btztS/7/
.blue {
background-color: aqua;
display:block;
width:100px;
height:100px;
position:absolute;
margin-top:100px;
-webkit-transition(margin-top 2s ease-in);
}
a.yellow {
background-color: yellow;
display:block;
width:100px;
height:100px;
position:absolute;
margin-top:0px;
transition: margin-top 2s;
-moz-transition: margin-top 2s;
-webkit-transition: margin-top 2s;
-o-transition: width 2s;
}
a.yellow:hover {
margin-top:400px;
}