latest news block

This bootstrap snippet latest news block was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: news

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

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

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

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

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.7

Created: Nov 3rd 2016, 19:12

Views: 950