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)
Related
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?
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/
I'm building a portfolio site for a friend. One of the features includes an image change on hover.
I am trying to achieve this by:
Creating a div with background image
Layering another image over the top of it.
#b1 {
position:relative;
background-image: url('http://s10.postimg.org/d03f8a015/SHOT_09_060_V2.jpg');
}
#b1.img {
opacity:1;
position:absolute;
left:0;
}
#b1 img:hover {
opacity:0;
}
<div id="b1">
<img src="http://s29.postimg.org/v7eh0qmxz/SHOT_04_024_V7.jpg">
</div>
However, I cannot get the background image to appear and have tried numerous steps to troubleshoot where I'm going wrong.
The JSFiddle with my code appears to be working, but I cannot reproduce it successfully on my localhost.
You need to set CSS rules for width and height of your div that contains background image.
Example:
#b1 {
width:500px; //set your own value
height:500px; //set your own value
position:relative;
background-image: url('http://s10.postimg.org/d03f8a015/SHOT_09_060_V2.jpg');
}
I think it has something to do with the #b1.img selector. When I change that to #b1 img as I think it should be, I don't get the background image repeating across the page and I'm able to reproduce the issue of not seeing it on hover. Then I add height: 480px; width: 359px; to the #b1 tag and it works. Does that change fix it for you?
If not, try using this method instead of changing the opacity: https://stackoverflow.com/a/18813323/4285369
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.
Can any one tell me how to make a web page disable using CSS.It means user will not be able to click on the any content of the web page one screen type of things will be there and user will only able to see the content bellow the screen.
Not sure but if you mean user should only see content and be not able to click anywhere, you can create an overlay with CSS:
#overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#fff;
opacity: 0.1;
filter: alpha(opacity=10);
}
This CSS will apply the overlay on entire screen, however if you want to do this to a certain part of the page then you need to adjust the values for these properties:
top:0;
left:0;
width:100%;
height:100%;