<div class="form-type">
<div class="img-form" style="background-image: url('$IMG_URL1$')">
<div class="shadow"><div class="zoom">
<a href="$IMG_URL1$" class="ulightbox">
<img src="ссылка к картинке/zoom.png" width="28" height="28" border="0" title="Увеличить" /></a>
</div></div></div>
<div class="title">
<a href="$ENTRY_URL$" title="Перейти к просмотру"><?if(len($TITLE$)>20)?><?substr($TITLE$,0,20)?>...<?else?>$TITLE$<?endif?></a></div>
<div class="rating">
<span class="num-rate" title="Просмотры|Комментарии">
<span class="vie-icon"></span><b style="margin: 0;"> $READS$</b>
<span class="com-icon"></span><b style="margin: 0 5px 0 0;"> $RATING_NUM$</b></span></div>
</div>

.form-type {
width:32%;
float:left;
margin: 0.5% 0 0.5% 1%;
border: 1px solid #D3D3D3;
border-radius: 3px;
}
.title {
height: 22px;
text-align:left;
font-size: 14px;
margin: 0 5px;
}
.rating {
text-align:right;
background-color: #F5F5F5;
}
.img-form {
z-index:1;
border-radius: 3px 3px 0 0;
display: block;
position: relative;
margin: 0;
padding-bottom: 65%;
height: 0;
overflow: hidden;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
.num-rate {
color:#000;
font-size:14px;
}
.zoom {
display:block;
z-index:2;
position: absolute;
top:5px;
right:5px;
}
.shadow {
opacity:0;
position: absolute;
transition: all 0.5s ease 0s;
background-color: rgba(0,0,0,0.6);
width: 100%;
height: 100%;}
.shadow:hover {
opacity: 1;
}
.vie-icon {
width: 14px;
height: 12px;
background: url('ссылка к картинке/11.png')no-repeat;
display: inline-block;
}
.com-icon {
width: 14px;
height: 12px;
background: url('ссылка к картинке/12.png')no-repeat;
display: inline-block;
}
@media only screen and (max-width: 768px) {
.title {height:38px;}
}
@media only screen and (max-width: 640px) {
.form-type {width:48%;}
}

<span class=""><?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?></span>