<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;
}
