Animation partly works but not completely - animation

At the moment I have this, a small DIV that slides in from the top to the center of a container DIV when the mouse hovers over the container DIV; but on mouseout, it slides back out to where it came from. What I'd like to do is have the DIV slide out of the other side of the DIV, directly opposite where it entered.
Is this possible using just CSS? (I imagine with JQuery it would be more straightforward)
<div class="blocks">
<div class="blocks_title">
</div>
</div>
<div class="blocks">
<div class="blocks_title">
</div>
</div>
.blocks {
position: relative;
float: left;
margin: 20px;
width: 100px;
height: 100px;
border: 1px dotted #333;
overflow: hidden;
}
.blocks_title {
position: relative;
width: 20px;
height: 20px;
top: 0px;
left: 40px;
background: #333;
opacity: 0;
-webkit-transition: all .25s;
-moz-transition: all .25s;
transition: all .25s;
}
.blocks:hover .blocks_title {
top: 40px;
opacity: 1;
}

And just when everyone is convinced that it's not gonna work with css only:
http://jsfiddle.net/Xkee9/36/
I used an animation for the mouseenter and a transiton for the mouseleave
Edit: added firefox fix
Edit: Explanation:
(I always use -webkit- -prefixes, just to explain it in Chrome and Safari, Firefox uses the -moz- -prefix, opera the -o- - prefix)
When nothing happens:
the block is at the bottom of the div.blocks (top:80px;), with an opacity of 0, also there is no animation running
When hovering:
the block moves instantaneous to the top with no transition (see:-webkit-transition: none;), because then the animation down-1 is running. That animation moves the block from top:0 to top:40px; in .25s. After the animation, the block stays at top:40px; because that's what I added in .blocks:hover .blocks_title.
When mousleaving:
there is no animation running anymore, but the block moves from top:40px to top:80px; in .25s because of -webkit-transition: all .25s;

Related

CSS overflow, border-radius, mix-blend-mode, will-change : Depending on the width of the screen, the position of the element changes

I need mix-blend-mode element in my project, so I use mix-blend-mode property.
It looked fine at first, but as the screen narrowed, it changed to an unexpected appearance.
Also overflow: hidden doesn't work, so blue comes out of the corner.
I run this code in Chrome browser.
Looks different depending on screen width
.card{
position: relative;
width: 300px;
height: 50vh;
background-color: pink;
margin: auto;
overflow: hidden;
border-radius: 24px;
}
.blend{
width: 100%;
height: 100%;
background-color: blue;
mix-blend-mode: color-dodge;
will-change: transform;
}
<div class="card">
<div class="blend"></div>
</div>
Here's my code.
Please let me know why this problem happen.
Thank you!
I think border-radius, overflow, mix-blend-mode and will-change properties seems to be contributing to this problem, but still I don't know ★why★ this happens.

Using the Gamepad API, when window is resized, a finite padding-bottom appears and I can't seem to get rid of it?

QUESTION:
Using the Gamepad API, i am having a problem when re-sizing the window; namely, a finite padding-bottom appears between the bottom of the #gameBoard and the bottom edge of the Browser window -- which I do not want:
Please note that I have tried a Sticky Footer which depends on position: absolute; which I would prefer to avoid.
EG,
with a padding-bottom > 0
I am looking for this with each window re-size:
padding-bottom = 0
HTML:
<div id="gameEnclosure">
<div id="header">
stuff here
</div>
<div id="gameBoard">
<canvas id="game">
game piece img's here
</canvas>
</div>
</div> <!-- gameEnclosure -->
CSS
/* COMMON RESET */
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
body {
background-color: blue;
}
#gameBoard {
display: block;
position: relative;
width: 100%;
height: auto;
background-color: #fff;
background-image: url("../images/room.gif");
background-size: cover;
}
As already stated, I have tried using a Sticky Footer and I just do not like using position: absolute. Also, the individual game piece images do not maintain their proper aspect ratio with window re-sizing = another no-no.
JS
function doBodyOnResize() {
let gameHeight = $('#gameBoard').outerHeight();
$('body').css('padding-bottom', gameHeight);
$('#gameBoard').css('height', gameHeight);
}
This is the onresize function I used to have with the Sticky Footer.
Without a Sticky Footer, game pieces zoom in and zoom out just great -- if I could just get keep padding-bottom = 0 upon window resizing.

Latest opera won't hide the overflow while using border-radius property

while using border-radius Opera won't actually hide the overflowing parts of elements. I already tried to apply things I managed to find in similar threads, such as defining the border style or paying attention to positioning with absolute and relative parameters. It is still not working though.
html
<div class="node">
<div class="skill skill1"></div>
<div class="skill skill2"></div>
<div class="skill skill3"></div>
<div class="skill skill4"></div>
</div>
css
.node {
position: relative;
width: 250px;
height: 250px;
opacity: 0.9;
border-radius: 50%;
overflow: hidden;
left: -60px;
border: solid 1px transparent;
}
.skill {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
}
.skill1 {
background-color: #26ac79;
-webkit-transform: rotate(90deg) skewX(45deg);
transform: rotate(90deg) skewX(45deg);
}
.skill2 {
background-color: #25765f;
-webkit-transform: rotate(135deg) skewX(45deg);
transform: rotate(135deg) skewX(45deg);
}
.skill3 {
background-color: #25313f;
-webkit-transform: rotate(180deg) skewX(45deg);
transform: rotate(180deg) skewX(45deg);
}
.skill4 {
background-color: #25193d;
-webkit-transform: rotate(225deg) skewX(45deg);
transform: rotate(225deg) skewX(45deg);
}
Here's the fiddle:
http://jsfiddle.net/Mu9Ar/
Thanks for any help.
Actually the code you provided works in latest Opera with Blink engine, so I guess you can leave your code as is. However if you need it to work in versions up to 12.16 and your page background is white, what you can do is to put .png overlay over your chart which will clip the chart, just like webdevelopers did in old days when there were no border-radius:)
According to the W3 specification:
http://www.w3.org/TR/css3-background/#corner-clipping
A box's backgrounds, but not its border-image, are clipped to the
appropriate curve (as determined by ‘background-clip’). Other effects
that clip to the border or padding edge (such as ‘overflow’ other than
‘visible’) also must clip to the curve. The content of replaced
elements is always trimmed to the content edge curve.
It appears that Firefox implemented the spec correctly by clipping the content to the edge of the curve when using overflow: hidden.
However, Opera is not compliant on this detail.
As an aside, if you add border-radius property to an img element, the image will be clipped correctly.
At this moment, there is no work-around that I know of unless you try HTML5 canvas.

IE8 and IE9 :before and :after elements position absolute are hidden

I am trying to create a button with "caps" on either end, and a repeating background, in order to keep the button a flexible size.
In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button's background-covered space (using negative values).
It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are "outside" the button, and therefore are hidden. Does anyone know how to pop these pseudo-elements "out" of the button, so that they will render?
I want to keep the HTML to just the <button></button> element, and am using SASS.
You can see a jsFiddle here: http://jsfiddle.net/Dqr76/8/ or the code below:
button {
display: inline-block;
zoom: 1;
*display: inline;
border:0;
background-image: url(../images/btn_bg.png);
background-repeat: repeat-x;
color: #fff;
font-weight: bold;
height: 22px;
line-height: 22px;
position: relative;
margin: 0 5px;
vertical-align: top;
&:before {
display: inline-block;
height: 22px;
background-image: url(../images/btn_left.png);
width: 5px;
position: absolute;
left: -5px;
top: 0;
content: "";
}
&:after {
display: inline-block;
height: 22px;
background-image: url(../images/btn_right.png);
width: 5px;
position: absolute;
right: -5px;
top: 0;
content: "";
}
}
Just a sidenote, before someone brings it up, I know that these pseudo-elements do not work in < IE8, and have created a work-around that is not effecting this problem.
Add overflow: visible; to the button element, and it shows up.
Demonstrated at this jsFiddle
I swear I tried that already, but I guess not. Thanks to this question

CSS3 transition/hover effect not working in Firefox; a Firefox bug?

I'm trying to create a mouse-over effect that slides the top layer to the left and reveal the bottom layer using CSS3. The code works in Chrome but not in Firefox...did I do something stupid again? Thanks for your help!
Edit: I must have done something wrong, because even if I leave out the transition code, nothing happens when I hover over "layers" in Firefox...:(
The code:
<html>
<div class="layers">
<div class="over">content</div>
<div class="under">content</div>
</div>
</html>
The style:
.layers {
position: relative;
width: 200px;
height: 50px;
overflow: hidden;
}
.over {
width: 200px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.under {
width: 200px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
}
.layers:hover .over {
left: -200px;
}
Turns out there is a bug in Firefox (firefox hover opacity) and I solved the problem by changing
.layers:hover .over {}
to
[class="layers"]:hover over {}
I just upgraded to Firefox 5 (from Firefox 4); not sure if the bug has been fixed or not...
See this question: Why is my CSS3 Transition not working in Firefox?

Resources