Picture, Overlay, and Block

The idea behind this is to change the way these three element interact responsively. At 320px, there is no block but it appears as you drag the screen wider.

by Matthew Day

HTML

<div class="wrap">
    <div class="full-bar"> <!-- bg: green w/ diagonals -->
        <div class="image">
            <img src="http://www.placekitten.com/300/500/">
        </div>
        <div class="content"> <!-- bg: 70pc.png -->
            <h1>News Flash</h1>
            <p>This kitten looks harmless but he's really a killer.</p>
        </div>
    </div>
</div>

CSS

.wrap {
    position: relative;
    height: 200px;
    width: 100%;
    overflow: hidden;
}

.full-bar {
    position: absolute;
    top: 0;
    left: 0;
    background: green;
    height: 200px;
    width: 100%;
}

.content {
    position: relative;
    color: white;
    width: 60%;
    height: 100%;
    font-size: 18px;
    padding: 12px 30px;
    background: rgba(0,0,0,.4);
}

.image {
    position: absolute;
    top: 0;
    right: 0;
}