Html
<section class="column news-section">
<div class="auto-container">
<div class="sec-title">
<h2>News & Artical</h2>
<div class="text">You read now our latest news and artical</div>
</div>
<div class="row-cards">
<div class="column is-4 news-block">
<div class="inner-box">
<div class="image-box">
<a href="blog-detail.html"><figure class="image"><img src="http://ary-themes.com/html/bold_touch/wooder/images/resource/news-1.jpg" alt=""></figure></a>
</div>
<div class="lower-content">
<div class="post-date"><span class="far fa-calendar"></span> Jan 01, 2020</div>
<ul class="post-info">
<li><span class="far fa-user"></span> By Admin | </li>
<li><a href="#">General Carpentry</a></li>
</ul>
<h4><a href="blog-detail.html">Woodworker treak truned into furniture for exhibition.</a></h4>
<div class="btn-box"><a href="#" class="read-more">Read More <span class="fa fa-arrow-right"></span></a></div>
</div>
</div>
</div>
<div class="column is-4 news-block">
<div class="inner-box">
<div class="image-box">
<figure class="image"><a href="blog-detail.html"><img src="http://ary-themes.com/html/bold_touch/wooder/images/resource/news-1.jpg" alt=""></a></figure>
</div>
<div class="lower-content">
<div class="post-date"><span class="far fa-calendar"></span> Jan 02, 2020</div>
<ul class="post-info">
<li><span class="far fa-user"></span> By Admin | </li>
<li><a href="#">General Carpentry</a></li>
</ul>
<h4><a href="blog-detail.html">Home Repair and Maintain safe now in the rantain.</a></h4>
<div class="btn-box"><a href="#" class="read-more">Read More <span class="fa fa-arrow-right"></span></a></div>
</div>
</div>
</div>
<div class="column is-4 news-block">
<div class="inner-box">
<div class="image-box">
<figure class="image"><a href="blog-detail.html"><img src="http://ary-themes.com/html/bold_touch/wooder/images/resource/news-1.jpg" alt=""></a></figure>
</div>
<div class="lower-content">
<div class="post-date"><span class="far fa-calendar"></span> Jan 03, 2020</div>
<ul class="post-info">
<li><span class="far fa-user"></span> By Admin | </li>
<li><a href="#">General Carpentry</a></li>
</ul>
<h4><a href="blog-detail.html">Good furniture is now on persale in showroom in Dec.</a></h4>
<div class="btn-box"><a href="#" class="read-more">Read More <span class="fa fa-arrow-right"></span></a></div>
</div>
</div>
</div>
</div>
</div>
</section>
Css
.news-section{
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 120px 0 90px;
}
.news-block{
position: relative;
margin-bottom: 30px;
}
.news-block .inner-box{
position: relative;
background-color: #ffffff;
box-shadow: 0 10px 20px rgba(0,0,0,0.14);
}
.news-block .image-box{
position: relative;
}
.news-block .image{
position: relative;
overflow: hidden;
margin-bottom: 0;
}
.news-block .image-box .image a:after{
content: "";
position: absolute;
top: -110%;
left: -210%;
width: 200%;
height: 200%;
opacity: 0;
background: rgba(255, 255, 255, 0.13);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.13) 77%,
rgba(255, 255, 255, 0.5) 92%,
rgba(255, 255, 255, 0.0) 100%
);
}
.news-block .inner-box:hover .image-box .image a:after {
opacity: 1;
top: -20%;
left: -30%;
transition-property: left, top, opacity;
transition-duration: 0.7s, 0.7s, 0.15s;
transition-timing-function: linear;
}
.news-block .image img{
display: block;
width: 100%;
}
.news-block .lower-content{
position: relative;
padding: 35px 30px 20px;
}
.news-block .post-date{
position: absolute;
left: 0;
top: -15px;
background-color: #ab7442;
box-shadow: 0 0 20px rgba(0,0,0,0.10);
padding: 5px 15px 5px 30px;
border-radius: 0 30px 30px 0;
font-size: 14px;
line-height: 20px;
color: #ffffff;
font-family: 'Poppins', sans-serif;
}
.news-block .post-info{
position: relative;
margin-bottom: 15px;
}
.news-block .post-info li{
position: relative;
display: inline-block;
font-size: 14px;
line-height: 24px;
color: #353535;
font-weight: 400;
font-family: "Poppins", sans-serif;
}
.news-block .post-info li a{
color: #353535;
display: inline-block;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block .post-info li a:hover{
color: #ab7442;
}
.news-block .post-info li span{
margin-right: 5px;
color: #ab7442;
}
.news-block h4{
position: relative;
display: block;
font-size: 20px;
line-height: 1.4em;
color: #353535;
font-weight: 500;
margin-bottom: 15px;
}
.news-block h4 a{
color: #353535;
display: inline-block;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block h4 a:hover{
color: #ab7442;
}
.news-block .btn-box{
position: relative;
}
.news-block .btn-box a{
position: relative;
display: inline-block;
font-size: 16px;
line-height: 24px;
font-weight: 600;
color: #353535;
}
.news-block .btn-box a span{
opacity: 0;
visibility: hidden;
font-size: 12px;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block .btn-box a:hover{
color: #353535;
}
.news-block .inner-box:hover .btn-box a span{
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
visibility: visible;
opacity:1;
}
.row-cards {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.sec-title h2 {
position: relative;
display: inline-block;
font-size: 72px;
color: #353535;
line-height: 1em;
font-weight: 600;
cursor: default;
-webkit-text-stroke: 1px #353535;
}
@media screen and (max-width: 768px) {
.row-cards {
display: block;
}
}