Title box overlap mirror

dabblet.css

/**
 * Title box overlap mirror
 */


.title {
    position: absolute; left: 25px; top: 25px; }

.content-box {
    position: relative; left: 50px; top: 50px; 
    width: 300px; background: white; 
    color: #000; 
    overflow: hidden; 
    color: #fff; 
    min-height:100px;
    height:auto !important;
    height:100px; }

.overlap-box {
    position: relative; left: -25px; top:-25px; 
    z-index: 10;
    background-color: navy; 
    white-space:nowrap; 
    color: #fff;
    width: 300px; }

.article {
    color: #333; }

h1 { font-size:250%; }​

dabblet.html

<div class="title">
    <h1>This is some text</h1>
</div>
<div class="content-box">
    <div class="overlap-box">
        <h1>This is some text</h1>
    </div>
    <div class="article">
        This is the body text
    </div>
</div>

​

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}