Простой вид в светлой гамме, где представлены все функций и безусловно присутствуют эффекты, что прописаны как на заголовке по смене оттенка. Но и на самом изображение, где при клике появляется темно светлая палитра и на ней написано, на переход на основу. Тематически много можно где его определить и шрифтовые иконки как дополнение прописать. Вообщем ранее вид был простой, здесь немного доработан под носители. чтоб корректно показывал весь материал, что заливают на сайт.
Приступаем к установке:
Код:
Код
<div class="sarulokgtu_kacernum">
<div class="guniklod_vaserames">
<div class="guniklod_vaserames-img"><a href="$ENTRY_URL$" title="$TITLE$"><div class="mask">Перейти к материалу</div><img src="$IMG_URL1$" alt="$TITLE$"></a></div>
<div class="guniklod_vaserames-title"><a href="$ENTRY_URL$">$TITLE$</a></div>
<div class="ie-information"><i class="fa fa-eye"></i> <b>$READS$</b><span style="padding-left:10px;"><i class="fa fa-comments"></i> <b>$COMMENTS_NUM$</b><span style="padding-left:10px;"><i class="fa fa-calendar"></i> <b title="$TIME$">$DATE$</b><span style="padding-left:10px;"><i class="fa fa-thumbs-o-up"></i> <b>$RATING$</b><hr></div>
<div class="guniklod_vaserames-text"><p>$MESSAGE$</p></div>
</div>
</div>
CSS:
Код
.guniklod_vaserames {border: 1px solid #a7a7a7;width: 47%;float: left;margin: 0 2% 2.5% 0;background: rgba(173, 171, 168, 0.15);border-radius: 7px 7px 3px 3px;}
.guniklod_vaserames-img {width: 100%;height: 220px;overflow: hidden;position: relative;border-radius: 3px 3px 0px 0px;}
.guniklod_vaserames-img img {width: 100%;min-height: 100%;border-radius: 7px 7px 0px 0px;}
.mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(27, 25, 25, 0.6);text-align: center;line-height: 220px;color: #efebeb;font-size: 15px;opacity: 0;transition: all .3s ease;font-family: 'Cuprum';text-transform: uppercase;border-radius: 3px 3px 0px 0px;}
.guniklod_vaserames-img:hover .mask {opacity: 1;}
.guniklod_vaserames-text {padding: 0 12px 0 12px;line-height: 19px;color: #2d2a2a;height: 103px;overflow: hidden;margin: 0 0 14px 0;text-align: justify;}
.guniklod_vaserames-title {padding: 15px 20px 5px 15px;color: #205F8A;font-size: 15px;height: 25px;overflow: hidden;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;}
.guniklod_vaserames-title a {color: #3c69a2;text-decoration:none;}
.guniklod_vaserames-title a:hover {color: #6b4f10;text-decoration:none;}
.ie-information {margin: 3px 12px -31px;color:#393939;font-size: 12px;}
.sarulokgtu_kacernum {margin: 0px -12px 1px 13px;}
@media screen and (max-width: 1124px) {
.guniklod_vaserames {width: 46%;margin: 1%;}
}
@media screen and (max-width: 680px) {
.guniklod_vaserames {width: 96%;margin: 2% 5% 5% 0%;}
}