<div class="uRelatedEntry uProject-info">  
<img src="$IMG_URL1$" alt="$TITLE$" />  
   
<div class="capt">  
<h4>$TITLE$</h4>  
<p>$CATEGORY_NAME$</p>  
<a class="btn-vid-pm" href="$ENTRY_URL$" title="Перейти к просмотру">View More</a>  
<div class="uRelatedEntry-info">  
<span><i class="eye"></i>$READS$</span>  
<span><i class="comm"></i>$COMMENTS_NUM$</span>  
<span><i class="time"></i>$TIME$</span>  
</div>  

</div>  
$TITLE$  
</div>

.uRelatedEntry {  
width: 32%;  
float: left;  
margin: 0.5%;  
height: 230px;  
  position: relative;  
}  
.uRelatedEntry img {  
opacity: 0.85;  
height: 200px;  
display: block;  
overflow: hidden;  
}  
   
.uProjects-img:hover {  
opacity: 1;  
}  
.uProject-info {  
width: 32%;  
  overflow: hidden;  
}  
.uProject-info .capt {  
  position: absolute;  
  top: 0px;  
  left: 0px;  
  background: rgba(0,0,0,0.7);  
  width: 100%;  
  height: 100%;  
  color: #fff;  
  opacity: 0;  
  -o-transition: all 0.5s linear 0s;  
  -webkit-transition: all 0.5s linear 0s;  
  -moz-transition: all 0.5s linear 0s;  
  -o-transition: all 0.5s linear 0s;  
  transition: all 0.5s linear 0s;  
}  
.uProject-info .capt h4 {  
  font-size: 12px;  
  font-weight: 700;  
  text-transform: uppercase;  
  text-align: center;  
  border-bottom: 1px solid white;  
  padding: 0 10px 20px;  
  margin-top: 20px;  
  position: relative;  
  left: 300px;  
  opacity: 0;  
  -o-transition: all 0.3s linear 0s;  
  -webkit-transition: all 0.3s linear 0s;  
  -moz-transition: all 0.3s linear 0s;  
  -o-transition: all 0.3s linear 0s;  
  transition: all 0.3s linear 0s;  
}  
.uProject-info .capt p {  
  margin: 15px 0px;  
  font-size: 9pt;  
  text-align: center;  
  font-style: italic;  
  padding: 0px 10px;  
  opacity: 0;  
  -o-transition: all 0.3s linear 0s;  
  -webkit-transition: all 0.3s linear 0s;  
  -moz-transition: all 0.3s linear 0s;  
  -o-transition: all 0.3s linear 0s;  
  transition: all 0.3s linear 0s;  
}  
.uProject-info:hover .capt,  
.uProject-info:hover p {  
  opacity: 1;  
}  
.uProject-info .capt a.btn-vid-pm {  
  width: 120px;  
  text-align: center;  
  display: block;  
  background: #6ec5f7;  
  color: #fff;  
  padding: 10px 0px;  
  margin: 0px auto 0px auto;  
  position: relative;  
  opacity: 0;  
  left: -300px;  
  -o-transition: all 0.3s linear 0s;  
  -webkit-transition: all 0.3s linear 0s;  
  -moz-transition: all 0.3s linear 0s;  
  -o-transition: all 0.3s linear 0s;  
  transition: all 0.3s linear 0s;  
}  
.uProject-info:hover h4,  
.uProject-info:hover a.btn-vid-pm {  
  left: 0px;  
  opacity: 1;  
}  
.uProject-info:hover a.btn-vid-pm:hover {  
  background: #3eb1f4;  
  border-color: #3eb1f4;  
  color: #ffffff;  
  box-shadow: 0 6px 11px 0 rgba(62, 177, 244, 0.35);  
}  
@media all and (max-width:480px) {  
.uRelatedEntry {  
  width:49%;  
  float:left;  
  margin: 0.5%;  
  }  
}  
.uProject-info .uRelatedEntry-info {  
  opacity: 0;  
  position: absolute;  
  width:100%;  
  color:#333;  
  bottom: 0px;  
  left:0px;  
}  
.uProject-info:hover .uRelatedEntry-info {  
  background-color: #fff;  
  text-align: center;  
  padding: 4px 7px;  
  opacity: 1;  
  }  
.uRelatedEntry-info span {  
  padding:3px 7px;  
  margin:3px 5px;  
  }  
.uProject-info .uRelatedEntry-info .comm {  
  background:url('http://zornet.ru/Aben/Aben-Abag/bubbles.png') 0 0 no-repeat;  
  padding-left:20px;  
  background-size:16px  
  }  
.uProject-info .uRelatedEntry-info .eye {  
  background:url('http://zornet.ru/Aben/Aben-Abag/eye.png') 0 0 no-repeat;  
  padding-left:20px;  
  background-size:16px  
  }  
.uProject-info .uRelatedEntry-info .time {  
  background:url('http://zornet.ru/Aben/Aben-Abag/clock.png') 0 0 no-repeat;  
  padding-left:20px;  
  background-size:16px  
  }