html
css
Link
to demo
<div class="item1"> <div class="inner">1</div> </div> <div class="item2"> <div class="inner">2</div> </div>
BODY { padding: 30px 0 0 0; text-align: center; } DIV { display: inline-block; width: 200px; height: 200px; } .item1 { opacity: .99; background: gold; } .item2 { background: mediumpurple; } .inner { position: relative; width: 180px; height: 100px; margin: 20px 0; line-height: 100px; font-size: 5em; color: rgba(255,255,255,.7); } .item1 .inner { z-index: 10; background: hsla(10,100%,50%, .8); } .item2 .inner { left: -100px; background: hsla(200,100%,50%, .8); }