swap background image on pseudo element

by jorgeluis

HTML

<div class="container">
    <h1>pseudo background - <span>0</span></h1>
    <p>Testing background images on pseudo (:after) element, and image them by changing classname.</p>
</div>

CSS

html, body {
    min-height: 100%;
}
.container {
    position: relative;
    background: #000;
    overflow: hidden;
    min-height: 100%;
    height: 600px;

}

.container:after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 1;
    background-image: url('http://lorempixel.com/g/900/900/'); 
    background-repeat: no-repeat;
    background-position: 50% 0;
    -webkit-background-size: cover;
    background-size: cover;

    -webkit-transition: 0.1s all ease-in;
    transition: 0.1s all ease-in;

  -webkit-animation: quickfade 1s alternate; /* Safari 4+ */
  -moz-animation:    quickfade 1s alternate; /* Fx 5+ */
  -o-animation:      quickfade 1s alternate; /* Opera 12+ */
  animation:         quickfade 1s alternate; /* IE 10+, Fx 29+ */

}

@keyframes quickfade {
  to   { opacity: 0.4; }
}
@-webkit-keyframes quickfade {
  to   { opacity: 0.4; }
}

.container.slide2:after {
    background-image: url('http://lorempixel.com/g/902/902/');
}
.container.slide3:after {
    background-image: url('http://lorempixel.com/g/903/903/');
}
.container.slide4:after {
    background-image: url('http://lorempixel.com/g/904/904/');
}
.container.slide5:after {
    background-image: url('http://lorempixel.com/g/905/905/');
}
.container.slide6:after {
    background-image: url('http://lorempixel.com/g/906/906/');
}
.container.slide7:after {
    background-image: url('http://lorempixel.com/g/907/907/');
}
.container.slide8:after {
    background-image: url('http://lorempixel.com/g/908/908/');
}
h1 {
    z-index: 2;
    position: relative;
}

JavaScript

var i=2;
$('.container').on('click', function() {
    if(i < 8) {
        $(this).attr('class','container slide' + i);
        $('h1 span').text(i);
        i++;
    }
});