How to crop and design these images like this using html and css?

Question

I'm trying to mimic this technique:

Above there are 3 different images that are cropped and arranged to be on the same height.

I tried to do this using css masking and i only got ugly results.

Any ideas how to achive this using Html/CSS??

Answer 1

Demonstration of Basic Concept

Consider the following HTML:

<div class="main">
    <img src="http://placekitten.com/1500/500">
    <div class="lbg">
        <img src="http://placekitten.com/750/500">
    </div>
    <div class="rbg">
        <img src="http://placekitten.com/750/700">
    </div>
</div>

and the following CSS:

div.main {
    width: 600px;
    border: 1px dotted blue;
    overflow: hidden;
    position: relative;
}
div.lbg {
    width: 560px;
    height: 360px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: gray;
    border: 10px solid white;
    transform: translate(-250px,50px) rotate(45deg);
    overflow: hidden;
}
div.rbg {
    width: 560px;
    height: 360px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: gray;
    border: 10px solid white;
    transform: translate(290px,50px) rotate(-45deg);
    overflow: hidden;
}
.main img {
    height: 200px;
    width: 600px;
    display: block;
}
.lbg img {
    width: auto;
    height: 400px;
    display: block;
    transform: translate(-0px,-150px) rotate(-45deg);
}
.rbg img {
    width: auto;
    height: 350px;
    display: block;
    transform: translate(150px,-80px) rotate(45deg);
}

The idea is to place the wider primary image in a parent block container with overflow: hidden.

Within the parent block, use absolute positioning to place a child image over the main image, and then use CSS3 transforms to rotate and translate the image to get the effect that you want.

The trick it to rotate the child block container in one direction and then reverse the rotation on its child image.

Needless to say, there is some work to get the rotation angles and translation offsets just right, but it is doable.

I did not do all the math to get exactly what you needed, but this should get you going.

See demo at: http://jsfiddle.net/audetwebdesign/Lrgmnj7g/