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

<a href="$ENTRY_URL$">
  <div class="service-details">
  <img src="$IMG_URL1$" alt="$TITLE$">
  <div class="service-hover-text">
  <h3>$DATE$</h3>
  <h4>$CATEGORY_NAME$</h4>
  <p><?if(len($MESSAGE$)>135)?><?substr($MESSAGE$,0,135)?>.....<?else?>$MESSAGE$<?endif?></p>
  </div>
  <div class="service-white service-text">
  <p>$TITLE$</p>
  </div>
  </div>
</a>

.service-details {
  width: 48%;
  min-width: 300px;
  height: 200px;  
  overflow: hidden;
  position: relative;
  margin: 5px;
  float: left;
}

.service-details img {
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: 100%;
  height: 100%;
  float: left;
  transition: all 0.8s;
  -moz-transition: all 0.8s;
  margin-left: 5px;
  border: 10px solid #17212b;

}

.service-details:hover img {
  /*opacity: 0.4 !important;*/
}

.service-details .service-hover-text h3 {
  padding: 0px;
  margin: 0px;
  color:#00BFFF;
  font-size: 16px;
  font-weight:300;
  font-family: "Open Sans";
}

.service-details .service-hover-text h4 {
  padding: 0px;
  padding-bottom: 5px;
  margin: 0px;
  font-size: 12px;
  letter-spacing: 3px;
  width: 90%;
  font-family: "Open Sans";
  text-transform:uppercase;
  border-bottom: 2px solid #00BFFF;
}

.service-details .service-hover-text p {
  padding-top: 5px;
  font-size: 14px;
  line-height: 20px;
  font-family: "Open Sans";
}

.service-details .service-hover-text{
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 50%;
  padding: 3% 4%;
  background: #000;
  color: rgba(186, 41, 41, 0.9);
/* display: none;*/
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.4s;
  margin-left:5px;
}

.service-details:hover .service-hover-text {
  display: block !important;
  color: rgba(255,255,255,1);
  background:rgba(0, 0, 0, 0.9);
  left: 0px;
  top: 0px;
}

.service-details .service-text {
  width: 50%;
  height: inherit;
  background: #000;
  float: left;
  position: absolute;
  left: 50%;
}

.service-details .service-text p {
  padding:10px 10px 0px 10px;
  font-size: 18px;
  font-family: "Open Sans";
  font-weight:500;
  color: #fff;
}

.service-details .service-text p span {
  font-family: "Open Sans" !important;
}

.service-details .service-text a , .service-white .service-text {
  padding: 10px 0 0 20px;
  font-size: 14px !important;
  color:#DC143C !important;
  font-family: "Open Sans" !important;
  text-decoration: none !important;  
}  

.service-white {
  background: #17212b !important;
  width: 50% !important;
  height: inherit !important;
}

.service-white p {
  color: #fff !important;
}