Bootstrap snippet: latest news block

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: news



<div class="container"> <div class="latest-news-box"> <!-- Row --> <div class="row nomargin"> <div class="col-md-6 nopadding"> <div class="item item-left"> <div class="col-md-6 nopadding hidden-xs"> <img src="http://mianfolio.com/kosimedic/v1/img/news/image-01.jpg" alt="News Image"> <span class="img-overflow"></span> <div class="arrow-left"></div> </div> <div class="col-md-6 nopadding"> <div class="content"> <p class="date">02.03.2016</p> <h2>Oral Health Consultation</h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has...</p> <a href="#" class="btn blue small">Read More</a> <span class="comments">0 <i class="fa fa-comment-o" aria-hidden="true"></i></span> </div> </div> </div> </div> <div class="col-md-6 nopadding"> <div class="item item-left"> <div class="col-md-6 nopadding hidden-xs"> <img src="http://mianfolio.com/kosimedic/v1/img/news/image-02.jpg" alt="News Image"> <span class="img-overflow"></span> <div class="arrow-left"></div> </div> <div class="col-md-6 nopadding"> <div class="content"> <p class="date">02.03.2016</p> <h2>Deep Teeth Whitening</h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has...</p> <a href="#" class="btn blue small">Read More</a> <span class="comments">3 <i class="fa fa-comment-o" aria-hidden="true"></i></span> </div> </div> </div> </div> <div class="col-md-6 nopadding"> <div class="item item-right"> <div class="col-md-6 nopadding"> <div class="content"> <p class="date">02.03.2016</p> <h2>Latest Blog Image Post</h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has...</p> <a href="#" class="btn blue small">Read More</a> <span class="comments">11 <i class="fa fa-comment-o" aria-hidden="true"></i></span> </div> </div> <div class="col-md-6 nopadding hidden-xs"> <img src="http://mianfolio.com/kosimedic/v1/img/news/image-03.jpg" alt="News Image"> <span class="img-overflow"></span> <div class="arrow-right"></div> </div> </div> </div> <div class="col-md-6 nopadding"> <div class="item item-right"> <div class="col-md-6 nopadding"> <div class="content"> <p class="date">02.03.2016</p> <h2>BLog Post With Image</h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has...</p> <a href="#" class="btn blue small">Read More</a> <span class="comments">0 <i class="fa fa-comment-o" aria-hidden="true"></i></span> </div> </div> <div class="col-md-6 nopadding hidden-xs"> <img src="http://mianfolio.com/kosimedic/v1/img/news/image-04.jpg" alt="News Image"> <span class="img-overflow"></span> <div class="arrow-right"></div> </div> </div> </div> </div> <!-- ./end Row --> </div> </div>
body{margin-top:20px;} /* Latest News */ .latest-news-box { background-color: #fff; border-radius: 4px; border: 1px solid #ddd; overflow: hidden; } .item .content { padding: 15px; height: 250px; } .item { position: relative; width: 100%; height: 100%; cursor: pointer; } .item h2 { color: #4c4c4c; font-size: 18px; } .item p { font-size: 12px; line-height: 22px; margin: 10px 0; } .item p.date { font-size: 11px; font-weight: 600; color: #868686; opacity: .8; margin: 0; } .item .comments { position: absolute; bottom: 15px; right: 15px; } .latest-news-box .item .btn { position: absolute; bottom: 15px; left: 15px; } .latest-news-box .item img { width: 100%; height: 250px; } .img-overflow { background: #32b8da; background: -webkit-linear-gradient(left, #32b8da 0%, #5cceeb 42%, #32dac3 85%); background: -o-linear-gradient(left, #32b8da 0%, #5cceeb 42%, #32dac3 85%); background: linear-gradient(to right, #32b8da 0%, #5cceeb 42%, #32dac3 85%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32b8da', endColorstr='#32dac3',GradientType=1 ); width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; } .item:hover .img-overflow { opacity: .8; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .item .arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #fff; position: absolute; top: 15px; right: 0; } .item .arrow-right { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #fff; position: absolute; top: 15px; left: 0; } img { max-width: 100%; } .nopadding { padding: 0 !important; } .btn.blue, a.btn.blue { background: #32b8da; border-color: #32b8da; }
Dey-Dey

latest news block

Dey-Dey
  Nov 3rd, 19:12
27 Views