Responsive Fake Overlap

Give the impression that an image is breaking out of its parent element by using a pseudo element on the parent. It scales nicely with the screen size as the image resizes.

by Erik Woods

HTML

<section>
    <img src="http://vignette4.wikia.nocookie.net/mario/images/f/f8/Mario_Artwork_for_MK8.png/revision/latest?cb=20140223230520" alt="" />
</section>

<footer>
    <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
</footer>

SCSS

section {
    background: #00f;
    position: relative;
    text-align: center;
    z-index: 0;

    &:after {
        background: #fff;
        bottom: 0;
        content: '';
        display: block;
        height: 50%;
        position: absolute;
        width: 100%;
        z-index: -1;
    }

    img {
        max-width: 854px;
        width: 100%;
    }
}

footer{
    background: #ff0;
    border: 0 none;
    border-top: 1px solid #000;
    bottom: 0;
    color: #000;
    padding: 10px;
    position: fixed;
    width: 100%;
}