Does anyone know how to create a transition effect with CSS where the background color fades into another color based on the position of the page, similar to the effect triggered by divs with the same class? I came across a JavaScript solution that works perfectly on desktops but breaks on iPads, regardless of the browser. Here is the code I found: http://codepen.io/Funsella/pen/yLfAG
Is there a way to achieve this transition effect using only CSS, without the need for JavaScript? I found a CSS example that achieves a similar effect when triggered by a hover event: 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;
}