<article class="news-box"> 
<div class="image-news"> 
 <div class="link-more-wrap"> 
 <div class="link-more"><a href="$ENTRY_URL$"></a></div> 
 </div> 
<div class="category-informer" style="z-index:15;"><i class="fas fa-gamepad"></i> $CATEGORY_NAME$</div> 
 <div class="overlay-image"></div> 
 <ul class="detail-news"> 
 <li><span class="view"><i class="fa fa-eye"></i> $READS$</span></li> 
 <li><span class="data"><i class="fas fa-calendar-alt"></i> $DATE$</span></li> 
 <li><span class="data"><i class="fa fa-comments"></i> $COMMENTS_NUM$</span></li> 
 </ul> 
 <div class="preload"><a class=""><img src="$IMG_URL1$" alt=""></a></div> 
</div> 
 <div class="description-news"> 
 <div class="title-news"><a href="$ENTRY_URL$"><h4>$TITLE$</h4></a></div> 
 <div class="description-news2"><div class="bemerka-text">$MESSAGE$</div></div> 
 </div> 
</article>

CSS 
 

.news-box, 
.full-news-box {border-bottom: 1px solid #b8dbed;margin-bottom: 10px;background: #f4f4f4;} 
.news-box::after, .full-news-box::after, 
.news-box::before, .full-news-box::before {content:''; height:1px;width:20px;} 
.news-box::after, .full-news-box::after { right:-20px; } 
.news-box::before, .full-news-box::before { left:-20px; } 
.news-box .image-news, .comixs-box .image-news {display:inline-block;height: 150px;width:300px;margin-right:20px;overflow:hidden;position:relative;} 
@media only screen and (max-width: 768px) { .news-box .image-news, .comixs-box .image-news {display:inline-block; height:169px;width:100%; margin-right:20px; overflow:hidden; position:relative; }} 
.news-box .image-news .preloader { height:169px;width:300px; overflow:hidden; } 
.news-box .link-more-wrap, .comixs-box .link-more-wrap, 
.photo .link-more-wrap, .full-image-box .link-more-wrap, 
.video .link-more-wrap {box-shadow:none;transition: all 0.6s ease-in-out; transform: scale(0);} 
.news-box .image-news:hover > .link-more-wrap, .comixs-box .image-news:hover > .link-more-wrap, 
.photo:hover > .link-more-wrap, .full-image-box:hover > .link-more-wrap, 
.video:hover > .link-more-wrap {box-shadow:0 0 0 20px rgba(255,255,255,0.2);transform: scale(1);} 
.news-box .link-more-wrap, .comixs-box .link-more-wrap, 
.news-box .link-more, .comixs-box .link-more, 
.photo .link-more-wrap, .full-image-box .link-more-wrap, 
.photo .link-more, .full-image-box .link-more, 
.video .link-more-wrap, 
.video .link-more {border-radius:50%;height:70px;width:70px;margin:auto;position: absolute;left:0; right:0; top:0; bottom:0;z-index:2;} 
.news-box .image-news img {width: 100%;height: 150px;object-fit: cover;} 
.news-box .image-news:hover img, 
.comixs-box .image-news:hover img, 
.photo:hover img, 
.video:hover img {filter: grayscale(80%);-webkit-filter: grayscale(80%);object-fit: cover;} 
.news-box .description-news {display:inline-block; height:172px; width: 450px; overflow:hidden; text-align: left; vertical-align:top; font-size: 14px;} 
@media only screen and (max-width: 768px) { .news-box .description-news {display:inline-block;height:172px; width: 100%; overflow:hidden; text-align: left; vertical-align:top; font-size: 14px;}} 
.news-box .description-news .title-news {font-family: 'Exo 2', sans-serif; } 
@media only screen and (max-width: 768px) {.news-box .description-news .title-news {font-family: 'Exo 2', sans-serif;text-align:center;}} 
.news-box .description-news .title-news a { text-decoration:none; font-size: 16px; } 
.news-box .description-news .title-news a:hover { color:#ff6286;} 
.news-box .description-news img, 
.entryReadAll {display:none;} 
.news-box .detail-news, 
.comixs-box .detail-news, 
.photo .detail-photo, 
.video .detail-video {background:rgba(32,33,51,0.6);color:#fff;font-size:12px;height: 30px;width: 100%;position:absolute;bottom: -12px;transition:all 0.3s ease-in-out;text-align: center;padding: 0 10px 10px 0;} 
@media only screen and (max-width: 768px) { .news-box .detail-news, 
.comixs-box .detail-news, 
.photo .detail-photo, 
.video .detail-video {display:none;}} 
.news-box .image-news:hover > .detail-news, 
.comixs-box .image-news:hover > .detail-news, 
.photo:hover > .detail-photo, 
.video:hover > .detail-video {display:none;} 
.news-box .detail-news li, 
.comixs-box .detail-news li, 
.photo .detail-photo li, 
.video .detail-video li {display:inline-block; height:30px; line-height:2.5; padding:0 10px 0 15px; } 
.news-box .detail-news li:first-child, 
.comixs-box .detail-news li:first-child, 
.video .detail-video li:first-child {background-image:none;} 
.news-box .detail-news li:first-child, 
.photo .detail-photo li:first-child, 
.video .detail-video li:first-child {background-image:none;} 
.news-box .detail-news li span, 
.photo .detail-photo li span, 
.video .detail-video li span {display:inline-block; height:30px; padding-left:25px;} 
span[class^="entRating"], span[class^="entRated"] {background-image:none;padding-left:0;} 
.news-box .detail-news .data, 
.video .detail-video .data {background-position:0 -30px;} 
.news-box .detail-news .comments {background-position:0 -60px; } 
.news-box .detail-news .download-num {background-position:0 -90px; } 
.news-box .image-news .overlay-image, 
.comixs-box .image-news .overlay-image, 
.photo .overlay-image, 
.video .overlay-image {height:100%;width:100%;position:absolute;top:0;transition:all 0.5s ease-in-out;z-index:1;} 
.news-box .image-news:hover > .overlay-image, 
.comixs-box .image-news:hover > .overlay-image, 
.photo:hover > .overlay-image, 
.video:hover > .overlay-image {background:rgba(85,92,108,0.5);} 
.news-box .link-more > a, 
.comixs-box .link-more > a, 
.photo .link-more > a, .full-image-box .link-more > a, 
.video .link-more > a, 
.flexslider .link-more > a {background:rgba(255,255,255,0.5) url(http://zornet.ru/ABVUN/ico-more-link.png) center center no-repeat; border-radius:50%; display:block; height:100%;width:100%; opacity:0; position: absolute; pointer-events:none; transform:scale(1.5); transition:all 0.4s ease-in-out 0.2s; } 
.photo .link-more > a, .full-image-box .link-more > a, 
.news-box .image-news:hover a, 
.comixs-box .image-news:hover a, 
.photo:hover a, .full-image-box:hover a, 
.video:hover a, 
.flexslider:hover a {opacity:1; pointer-events:auto; transform:scale(1);} 
.moder-panel {position:absolute;right:0;} 
.description-news2 {max-width: 100%;display: inline-block;padding-top: 15px;color: #3a3a3a;background: #f4f4f4;} 
@media only screen and (max-width: 768px) { .description-news2 {width: 100%;display: inline-block;padding-top: 15px;color: #3a3a3a;text-align: justify;}} 

.category-informer{position: absolute;background-color: #3498db;padding: 5px 7px 6px 7px;color: white;font-size: 13px;display: inline-block;float: left;margin: 5px;} 

.bemerka-text { 
 opacity: 0.8; 
 margin-bottom: 5px; 
 padding: 0 0px; 
 height: 85px; 
 overflow: hidden; 
 text-align: justify; 
}

Здесь тематика не важна, разве, что поменять сами значки, что больше тему определяют.