.bero {  
float:left;
margin-right:10px;
position:relative;  
}  

.b1 {  
background:#fff;  
border:1px solid #ddd;  
border-radius:3px;  
position:absolute;  
top:0px;  
left:190px;
width:370px;  
height:245px;  
z-index:2;  
display:none;  
   
}  

.b2 {  
margin-top:5px;
padding:0px;
font-size:10px;  
}  

.b3 {  
display:block;  
padding:10px;
  font-size:12px;
}  

.b1 div:first-child {  
background: #F9F9F9;  
border-bottom:1px solid #ddd;  
padding:10px;  
}  

.b1 div:last-child {  
position:absolute;  
bottom:0px;
width:350px;
background:#F9F9F9;  
border-top:1px solid #ddd;  
padding:10px;
}  

.bero:hover .b1 {  
display:block;
transition:all 0.5s;
}  
.bero:hover .b1:hover {  
display:none;
}

<a href="$ENTRY_URL$"><div class="bero">  
  <img style="width:180px; height:250px;" src="$IMG_URL1$" alt="">
  <div class="b1">  
  <div>$TITLE$  
  <br>  
  <span class="b2">$CATEGORY_NAME$</span>  
  </div>  

  <span class="b3">  
$MESSAGE$  
  </span>  

  <div>  
  <b style="font-size:14px;">$READS$</b> <b style="color:rgba(100, 100, 100, 0.5); font-size:12px;">ნანახია |</b>  
  <b style="font-size:14px;">$COMMENTS_NUM$</b> <b style="color:rgba(100, 100, 100, 0.5); font-size:12px;">კომენტარები |</b>  
  <b style="font-size:14px;">$RATING$</b> <b style="color:rgba(100, 100, 100, 0.5); font-size:12px;">რეიტინგი</b>  
  </div>  
  </div>  
</div>  
  </a>