Sliding Cover

CSS design to make the right-side content slide over the background image as screen gets smaller

by Ivan Melgrati

HTML

<div id="cover">
    <div id="title">This is the
        <br />moving title</div>
</div>

CSS

#cover {
    background-image:url(http://www.nkwindows.co.nz/assets/HomeSlides/nk-windows-02.jpg);
    width:100%;
    overflow:auto;
    position:relative;
    height: 360px;
}
#title {
    float:right;
    font-size:40px;
    padding:10px;
    margin:0;
    width:250px;
    background-color:#E2231A;
    color:#fff;
    height: 360px;
    box-sizing: border-box;
}