Вид материалов для uCoz

@import url(https://fonts.googleapis.com/css?family=Raleway);  .show_short {   font-family: 'Raleway', Arial, sans-serif;   position: relative;   display: inline-block;   overflow: hidden;   margin: 8px;   min-width: 250px;   max-width: 310px;   width: 100%;   background-color: #000000;   color: #ffffff;   text-align: left;   font-size: 16px;   box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);  }  .show_short * {   -webkit-transition: all 0.35s;   transition: all 0.35s;   -webkit-box-sizing: border-box;   box-sizing: border-box;  }  .show_short img {   max-width: 100%;   vertical-align: top;  }  .show_short figcaption {   position: absolute;   top: 0;   bottom: 0;   left: 0;   right: 0;   padding: 20px;   background-color: rgba(0, 0, 0, 0.75);  }  .show_short h3 {   font-size: 20px;   font-weight: 400;   line-height: 20px;   margin: 3px 0;  }  .show_short h5 {   font-weight: 400;   margin: 0;   color: #bbb;   letter-spacing: 1px;  }  .show_short a {   position: absolute;   top: 0;   bottom: 0;   left: 0;   right: 0;  }  .show_short:hover figcaption,  .show_short.hover figcaption {   top: 20px;   left: 20px;   right: 20px;   bottom: 20px;   background-color: #fff;  }  .show_short:hover h3,  .show_short.hover h3,  .show_short:hover h5,  .show_short.hover h5 {   color: #333;  }

<figure class="show_short">  <img src="$IMG_URL1$"/>  <figcaption>  <h3>$TITLE$</a>$MODER_PANEL_RIGHT$</h3>  <h5>$CATEGORY_NAME$</h5>  </figcaption>  <a href="$ENTRY_URL$"></a>  </figure>