I found a wired thing when I apply the transform to an element, it changes the z-index order, the code as:
<button class="test">
click me
</button>
css:
.test{
border-radius:100px;
transition:all 1s;
position:relative;
}
.test:hover{
transform:translateY(30px);
}
.test::after{
content:'';
position:absolute;
z-index:-1;
top:0;
left:0;
background:blue;
width:100%;
height:100%;
}
codepen: https://codepen.io/JianNCI/pen/jZQRpz?editors=1100
I was intending to hide the :: after content by setting thez-index order to -1 and I am setting the blue background color for distinguishing them. but once I hovering on the button, the hiding content will overlap the button. so my questions are:
Why the z-index:-1not working when I hovering on it? it is supposed to remain as -1 since I only set the transform property within the hover effect.
When I replace the transform property like color: red, it is work as I expected. So I am wondering if this the transform makes the z-index:-1 lose effect in this case?
Related
Im trying to get a transition working so that the bg colour fades into another colour depending on position of page/i.e. triggered by divs with same class.
Found some js here (http://codepen.io/Funsella/pen/yLfAG) which works exactly how I want on desktop, but it breaks on iPad (no matter the browser).
Would anybody know how to do this transition with CSS?
I found but it's triggered by a hover..
For example..
http://jsfiddle.net/L9JXG/1/
.div1 {
height:200px;
width:600px;
position:relative;
background:red;
}
.div1:after {
position:absolute;
width:100%;
height:100%;
content:'';
background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg");
background-size:cover;
opacity:1;
transition: 3s;
}
.div1:hover:after {
opacity:0;
}
You have to set suitable break points. Here is a great resource for the question.
A stand alone script to Change Page Background on User Scroll
Demo
This is the download link for the script http://download.techstream.org/Change-Page-Background-on-Scroll.zip (Download will start when you click on it)
When adding transitions to an element and altering the width and/or height and -webkit-transform:translate3d, the transition animation stutters. It appears to animate the width/height change first, as well translate it partially, then snaps to the final translated position. When returning to the original style, however, the animation is smooth. I'm only seeing this in Safari (version 8.0.6 tested). Here's some example css
#foo{
width:100%;
height:200px;
border:1px solid black;
position:relative;
}
#poop{
width:25px;
height:25px;
background-color:green;
position:absolute;
right:50%;
top:50%;
-webkit-transition: all 1s;
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
}
#foo .blah{
transform:translate3d(-100%,-100%,0);
-webkit-transform:translate3d(-100%,-100%,0);
width:100px;
height:100px; }
And a jsfiddle http://jsfiddle.net/84w4hj99/4/
I'm using jquery to add a class to the element on a button click for the sake of demonstration, but first noticed it when using :hover to get the same effect. Am I missing something here or is it just a problem with Safari, and does anyone know a workaround? Thanks.
Try using transform: scale() instead of changing the width and height. You will have a smooth transition in this case. However, you will have to adjust the top & right or transform: translate3D() properties to position your object back to the correct position. Should be easy.
See http://jsfiddle.net/y3xqak1z/
To witness the bug, hover on the right-side of the overlay box here (don't move your mouse even 1px after hovering):
http://jsfiddle.net/V99rf/
<style>
.container, .hoverMover {width:100px; height:100px; background:rgba(0,0,0,.2);}
.container {position:relative;}
.hoverMover {position:absolute; top:0; left:50px;}
.container:hover .hoverMover {background:green; left:0;}
.trans {-webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
</style>
<div class="container">
<div class="hoverMover trans">
</div>
</div>
Notice that even after the dom element moves to the left, it remains green with a ":hover" being set. This gets unset as soon as you move the mouse. How do I make it unset when the dom element moves from under the mouse, even if the mouse isn't moved?
A recursive javascript timeout would be unsatisfying, but may be the only way...?
This is only possible with an event, so you will need some sort of iterative loop to accomplish what you are looking for.
Basically what I am trying to do is have a div in the body with a fixed position float above everything. This works it is the next part where I have the problem, this is the code I use for it (in LESS)
.fadeIt{
opacity:0;
cursor:pointer;
.transition (opacity .5s linear);
z-index:-1;
display:block;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
&.cover{
z-index:101;
}
&.open{
opacity:1;
}
}
This works and I have a click event on elements to toggle its visibility, however I want to pull the clicked elements over it regardless of their place in the DOM. Giving it an "accent" effect. Currently the fadeIt element is right by the end of the body tag, I feel this is "cleaner" but am open to changing it.
So what I want to see in the end is when I click on an element that triggers the visibility of the fadeIt element, that the clicked element will appear overtop of it in the same position it is in within the DOM.
I need a div with picture bg to overlay an image (with some amount transparency) when hovered on. I need to be able to have one transparent overlay that can be used and reused throughout the site on any image. My first attempt was round-about to say the least. Because I found out you cannot roll-over an invisible div I devised a sandwhich system in which the original image is the first layer, the overlay is the second layer, and the original image is third layer again. This way, when you roll-over, the original image disappears revealing the overlay image over the original image:
http://www.nightlylabs.com/uploads/test.html
So it works. Kinda. Because of you cannot interact with an visibility:invisible element (why?!) the roll-over flickers unless you rest the cursor on it.
Any help? This method is bad so if anyone has a better one please comment.
I used the following css and its fine.
#container { position:relative; width:184px; height:219px;}
.image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:2;}
.overlay { background-image:url(aligo.png); position:absolute; top:0; left:0; width:184px; height:219px; z-index:3;}
.top-image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:4;}
.top-image:hover { background-image:none;}
The image flickers because you can't hover over something that isn't there.
It will work if you have it layered normally (no z-index necessary) and make it transparent, so that it is still being displayed and can be hovered over.
The second image won't flicker, and you can control the styling with the span tag. Here's some of the CSS I used:
img.side
{position:absolute;
border:1px solid black;
padding:5px 5px 5px 5px;
float:center;}
/*normal base images*/
img:hover+span
{display:block;}
/*new images. automatically display beneath base/hover image*/
.side:hover
{opacity:0;}
/*base images again, only when hovered over*/
span
{display:none;
cursor:pointer;}
The hover tag determines the styling of the base img (and base div), and hover+span defines the styling of the img that only appears when hovering.
Here is the html showing the div entirely:
<div class="only" id="one">
<img class="side" id="ach" src="ach.svg">Academic</a>
<span>
<img class="hovering" id="hach" src="Hach.svg">Academic</a>
</span>
</div>
Hope this helps.