"blog arrow list"
Bootstrap 3.0.0 Snippet by vivekbisht109

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--News dan artikel--> <section> <div class="latest-news-box"> <div class="col-md-8 col-md-offset-2 text-center"> <h2 class="text-primary text-black text-uppercase"> <span class="text-semibold text-grey-800">news</span> & artikel</h2> <div class="divider"></div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam voluptas facere vero ex tempora saepe perspiciatis ducimus sequi animi.</p> </div> <!-- 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://lorempixel.com/800/553/" 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>Bootstrap blog code example</h2> <p>Sample bootstrap code of blog design elements using bootstrap, javascript, css, and html. The following free Bootstrap blog templates we are about to explore...</p> <a href="artikel" class="btn btn-primary btn-xs">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://lorempixel.com/800/553/" 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>Blog post code snippets</h2> <p> I've created a blog post entry which explains how to add code syntax highlighting to blogger using the syntaxhighlighter 2.0. Code Snippet is a WordPress plugin for...</p> <a href="artikel" class="btn btn-primary btn-xs">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="news" class="btn btn-primary btn-xs">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://lorempixel.com/800/553/" 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>Free code snippets for bootstrap</h2> <p>A design element gallery for web designers and web developers. Find snippets using HTML, CSS, Javascript, jQuery, Bootstrap, and more. Gallery of free bootstrap snippets...</p> <a href="news" class="btn btn-primary btn-xs">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://lorempixel.com/800/553/" alt="News Image"> <span class="img-overflow"></span> <div class="arrow-right"></div> </div> </div> </div> </div> <!-- ./end Row --> </div> <!--end news dan artikel--> </section>
.latest-news-box { background-color: #fff; border-radius: 4px; overflow: hidden; } .latest-news-box .nopadding { padding: 0 !important; } .latest-news-box .nomargin{ margin: 0; } .latest-news-box .item { position: relative; width: 100%; height: 100%; cursor: pointer; } .item .content { padding: 15px; height: 250px; } .item p.date { font-size: 11px; font-weight: 600; color: #868686; opacity: .8; margin: 0; } .item h2 { color: #4c4c4c; font-size: 18px; } .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: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid #fff; position: absolute; top: 115px; right: 0; } .item .arrow-right { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #fff; position: absolute; top: 115px; left: 0; } .item p { font-size: 12px; line-height: 22px; margin: 10px 0; } .latest-news-box .item .btn { position: absolute; bottom: 15px; left: 15px; color: #fff; } .item .comments { position: absolute; bottom: 15px; right: 15px; }

Related: See More


Questions / Comments: