Вид материала 2 колонки на сайт uCoz

.main-block {  
width: 100%;  
}  
.block {  
display: block;  
float: left;  
width: 49%;  
margin: 0.5%;  
}  
.cover {  
display: block;  
position: relative;  
padding-bottom: 62%;  
border: 2px solid #363636;  
border-radius: 3px;  
background-size: 100% 100%;  
-moz-background-size: 100% 100%;  
}  
.name {  
display: block;  
position: absolute;  
left: 0;  
right: 0;  
bottom: 5px;  
background: rgba(0,0,0,0.85);  
height: 22px;  
overflow: hidden;  
}  
.font-name {  
color: #FFFFFF;  
font-family: Arial;  
font-size: 14px;  
font-weight: 700;  
text-transform: uppercase;  
margin: 2px 2px 2px 5px;  
}  
.fogging {  
z-index: 1;  
opacity: 0;  
overflow: hidden;  
cursor: pointer;  
position: absolute;  
top:0;  
left: 0;  
width: 100%;  
height: 100%;  
-webkit-transition: all 1s ease;  
-moz-transition: all 1s ease;  
-o-transition: all 1s ease;  
-ms-transition: all 1s ease;  
transition: all 1s ease;  
}  
.fogging:hover {  
opacity: 1;  
}  
.text {  
position: absolute;  
top: 35px;  
bottom: 62px;  
right: 5px;  
left: 5px;  
color: #FFFFFF;  
text-shadow: 1px 1px black, 2px 2px black, -1px -1px black, -2px -2px black, -1px 1px black, 1px -1px black, -2px 2px black, 2px -2px black, -3px -3px 4px #000000, -3px 3px 4px #000000, 3px 3px 4px #000000, 3px -3px 4px #000000;  
font-size: 14px;  
overflow: hidden;  
}  
.reads {  
position: absolute;  
top: 5px;  
left: 5px;  
background: rgba(0,0,0,0.85);  
height: 22px;  
color: #FFFFFF;  
font-size: 14px;  
}  
.category {  
position: absolute;  
top: 5px;  
right: 5px;  
background: rgba(0,0,0,0.85);  
height: 22px;  
color: #FFFFFF;  
font-size: 14px;  
}  
.category a {  
color: #FFFFFF;  
text-decoration: none;  
}  
.user {  
position: absolute;  
bottom: 30px;  
left: 5px;  
background: rgba(0,0,0,0.85);  
height: 22px;  
color: #FFFFFF;  
font-size: 14px;  
}  
.user a {  
color: #FFFFFF;  
text-decoration: none;  
}  
.date {  
position: absolute;  
bottom: 30px;  
right: 5px;  
background: rgba(0,0,0,0.85);  
height: 22px;  
color: #FFFFFF;  
font-size: 14px;  
}  
@media only screen and (max-width: 480px) {  
.block {float: none; width: 99%; margin: 0.5%;}  
}

<div class="main">  
<div class="block">  
<?if($MODER_PANEL$)?><div style="float:right; margin: 5px 5px 0 0;">$MODER_PANEL$</div><?endif?>  
<div class="cover" style="background-image: url('$IMG_URL1$')">  
<div class="name"><span class="font-name">$TITLE$</span></a></div>  
<div class="fogging" onclick="location.href='$ENTRY_URL$'">  
<span class="text"><p>$MESSAGE$</p></span>  
<span class="reads"><b style="margin: 0 5px;">Просмотры: $READS$</b></span>  
<span class="category"><b style="margin: 0 5px;"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</b></a></span>  
<span class="user"><b style="margin: 0 5px;">Добавил: <a href="$PROFILE_URL$">$USERNAME$</b></a></span>  
<span class="date"><b style="margin: 0 5px;">$DATE$</b></span>  
</div>  
</div>  
</div>  
</div>