Panels - Level 3

by Hugo Carneiro

HTML

<div class="panel col-xs-6">
    <div class="image-holder image-40"></div>
    <div class="text-holder text-full-60">
         <h2>Mollis Nibh</h2>

        <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.</p>
    </div>
</div>
<div class="panel col-xs-6">
    <div class="image-holder"></div>
    <div class="text-holder text-gradient">
         <h2>Mollis Nibh</h2>

        <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.</p>
    </div>
</div>

CSS

.panel {
    height: 250px;
    position: relative;
}
.panel .image-holder {
    background: url("http://topwalls.net/wp-content/uploads/2012/01/movies-films-beginning-inception-city-coast-sea-the-destruction-of.jpg");
    background-position: center center;
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.panel .image-holder.image-40 {
    right: 60%;
}
.panel .text-holder {
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    overflow: hidden;
}
.panel .text-holder.text-full-60 {
    top: 0;
    left: 40%;
}
.panel .text-holder.text-gradient {
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
}