Question

An article over on askthecssguy.com shows how to change/invert an image on scroll using fixed backgrounds: http://askthecssguy.com/articles/mike-asks-the-css-guy-about-a-scrolling-trick-with-background-images/

My goal takes this concept further by having the image float over other elements (in this case images).

You can see the result here: http://playground.iamkeir.com/invert-logo/v2/

However, my implementation uses superfluous elements and, so, I was wondering if anyone had any ideas/suggestions of another way to achieve this?

Javascript is certainly an option but I worry it would not be lean/elegant. Someone also suggested using Canvas.

Any ideas welcomed! Thank you.

Answer 1

You can avoid extra markup by using :after CSS pseudo element. Thus, your final markup will look like:

<ul>
        <li class="light">
            <img src="http://farm3.static.flickr.com/2802/4253151258_7d12da9e1c_z.jpg" />
        </li>
        <li class="dark">
            <img src="http://farm1.static.flickr.com/31/66005536_d1c5afca29_z.jpg?zz=1" />
        </li>
        <li class="light">
            <img src="http://farm4.static.flickr.com/3574/3646151231_0c68f4f974_z.jpg" />
        </li>
        <li class="dark">
            <img src="http://farm4.static.flickr.com/3432/3310214210_813d13c899_z.jpg" />
        </li>
    </ul>

And the altered CSS will be:

.dark:after,
.light:after,
.dark .after,
.light .after {
    position: absolute;
    display: block;
    content: '';
    top: 0; left: 0;
    height: 100%;
    width: 76px;
    background: transparent url(logo-white.png) no-repeat fixed 0 0;
    z-index: 5;
}

.dark:after,
.dark .after {
    background-image: url(logo-black.png);
}

Notice that there is .after class there. This is to make it work in IE<8, which, sadly, requires to use an expression:

.dark,
.light {
    behavior: expression( !this.before ? this.before = this.innerHTML = '<div class="after"></div>' + this.innerHTML : '' );
}

While using expressions is generally discouraged, this one shouldn’t affect the performance too much, since it is fully evaluated only once, and when the element is created, the condition returns false.

There is one pitfall, though. If IE8 works in IE8/IE8 mode, the pseudo-elements will be under the images, unless you set negative z-index for the latter, which isn’t always acceptable.

You can look at working example here.