css opacity ease in out affecting other elements too

Question

My page has a text form in the middle. The aim is to use css opacity transitions to switch background images by fading. (I'll be switching background images quite often)

Currently got it working nicely by using two layers of background images. To display a new image at the bottom layer, we fade out the top layer (opacity 1 to 0). To display a new image at the top layer, we fade in the top layer (opacity 0 to 1).

The problem is that my text form fades along with the top layer - which I want it to stay visible. How do I make it unaffected by the fading?

Attempts to solve this:

1. Setting z-index of either #searchForm input or .formDiv to 999999, thinking that this will put the form right at the top of the hierachy so it would be unaffected by transitions below. However, didn't work.

2. Setting position of #searchForm input or .formDiv to absolute. From http://www.w3schools.com/css/css_positioning.asp, "Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist."

3. This stackoverflow post CSS3 Alternating table rows opacity affects text as well as background says that child elements are affected by opacity too. I tried placing the div containing the background images inside the formDiv class so that it wouldn't be a child. But this will get the form covered by the top image, even without opacity on.

function changeBackground(newUrl) {
    //check which layer is currently activated
    if ($('#background-image-top').hasClass('transparent')) {
        //place new image over top layer
        $('#background-image-top').css('background-image', 'url(' + newUrl + ')');
        //fade in new image
        $('#background-image-top').toggleClass('transparent');
    } else {
        //place new image over bottom layer
        $('#background-image-bot').css('background-image', 'url(' + newUrl + ')');
        //fade out old image
        $('#background-image-top').toggleClass('transparent');
    }
}

    #background-image-top {
    background-image: url("../images/default.jpg");
    background-repeat: no-repeat;
    background-position: center center;

    background-size: cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out; }

    #background-image-bot {
    background-repeat: no-repeat;
    background-position: center center;

    background-size: cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;}

    .transparent {
    opacity: 0.25;}

    .formDiv {
    background-color: red;
    max-width: 500px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35%;}

    #searchForm input {
    width: 300px;
    height: 30px;
    font-size: 18px;}

Answer 1

+++ If you feel better to use css opacity transitions to switch background images by using only one div ie) #background1, you can use this code

$(document).ready(function() {
   $('#toggle').click(function(e) {
       e.preventDefault();        
       $('#background1').toggleClass('color1');
   });
});

body {
    background-color: #f8f8f8;
    color: #555;
}.container {
    position: relative;
    margin: 30px auto;
    padding: 20px;
    width: 200px;
    height: 150px;
    background-color: #fff
}
form {
    position: relative;
    z-index: 10;
}
input[type=text] {
    margin: 10px 0;
    padding: 5px;
    width: calc(100% - 10px);
    font-size: 15px;
    outline: none;
}
input[type=submit] {
    width: 100%;
    text-transform: uppercase;
    font-size: 15px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}
#background1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: lightblue;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#background1.color1 {
    background-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
     <div id="background1"></div> 
     <form>
        <h2>Awesome form!</h2>        
        <input type="text" placeholder="Some text here" />
        <input id="toggle" type="submit" value="Change now!" />
     </form>`enter code here`
</div>

Answer 2

I have made a little fiddle where you might can get inspiration, i just use a class to toggle the opacity and them put under the form with position absolute, hope it helps :)

and then use a click function with jQuery to toggle the effect.

the css:

form {
    position: relative;
    z-index: 10;
}

#background1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: lightblue;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#background2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: lightgreen;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.hide {
    opacity: 0;
}

http://jsfiddle.net/9jb68w2o/