.article-1x{ display:block; background:center center no-repeat; background-size:100%; background-size:cover; min-height:500px; position:relative; .read_more{ display:inline-block; padding:6px 15px; border:1px solid rgba(255,255,255,0.8); } .overlay{ position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); opacity:0; transition-duration:0.2s; } &:hover{ .overlay{ opacity:1; } } .description{ color:white; width:60%; position:absolute; bottom:30px; right:30px; text-align:right; h2{ margin-bottom:10px; padding-bottom:0; } .date{ opacity:0.8; margin-top:0; } } } .article-2x{ .read_more{ display:inline-block; padding:6px 15px; border:1px solid rgba(255,255,255,0.8); } border-sizing:border-box; float:left; width:50%; .inner{ margin:10px; background:rgba(24,14,4,1); color:rgba(255,255,255,0.9); height:200px; h2{ margin-top:10px; margin:0; } .date{ opacity:0.8; } .description{ padding:10px; } .img{ width:50%; float:left; margin-right:10px; display:block; height:200px; background:center center no-repeat; background-size:100%; background-size:cover; } } } .more_articles{ margin:10px; } .article_top{ height:480px; text-align:center; background: black center center no-repeat; background-size:100%; background-size:cover; position:relative; h1{ position:absolute; z-index:10; left:0; right:0; bottom:50px; } .gradient{ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0.5) 100%); height: 250px; position: absolute; bottom: 0; left: 0px; right: 0px; } &.with_img{ //padding-top:300px; color:white; } } .article_content{ .center{ max-width:650px; padding: 0 20px; margin:auto; } }