As a general rule it’s best not to disturb the integrity of a well-crafted photograph, but it is possible to split an image to reveal content hidden underneath. Most methods use two separate images, but it’s much more efficient to do so using CSS.

My version uses two copies of the same image. This has little effect on loading times, as browsers are intelligent enough to cache one copy and use it for any duplicates.

<figure>
    <figcaption>Born To Run</figcaption>
    <img src="road-to-nowhere.jpg" alt>
    <img src="road-to-nowhere.jpg" alt>
</figure>

The <figure> element and its text content is scaled to be perfect with respect to the viewport with vw units:

figure {
    position: relative;
    width: 60vw;
    height: 60vw;
    overflow: hidden;
    background-image: url(mad-dog.jpg);
    background-size: cover;
}
figcaption {
    position: absolute;
    top: 0;
    padding-top: 12vw;
    font-size: 10vw;
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
}

Both images are placed inside the <figure>:

figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: 2s ease-in-out;
}

And then each divided in half:

figure img:first-of-type {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
figure img:last-of-type {
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

And on hover, each half is moved away; the excess is concealed by the overflow: hidden on the <figure> element:

figure:hover img:first-of-type {
    transform: translateY(-45%);
}
figure:hover img:last-of-type {
    transform: translateY(45%);
}

The clipping effect (currently only supported in CSS via Webkit) is recreated in Firefox and other browsers using SVG, a technique I’ve covered previously.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/GJERGP