Вид материалов в красивым эффектом для uCoz

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

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