На днях у нас попросили поделится информером как на нашем сайте в правом блоке и мы в принципе не против и решили дать то что просят. Сам информер не чем особо не отличается но и его простота заставляет воспользоватся им.
И так создаём нужный информер и вставляем туда этот дизайн в сам шаблон информера.
Код <div class="sideInf"> <div class="side-inf-imgBl"><div class="side-inf-imgBord"> <a href="$ENTRY_URL$" title="$TITLE$"> <img src="$IMG_URL1$" alt="$TITLE$"> </a> <span class="side-inf-imgBl-title"><a href="$ENTRY_URL$" title="$TITLE$">$TITLE$ </a></span> </div></div> </div>
Далее установите стили в стили вашего сайта и сохраните
Код /*Top material*/
.sideInf {clear: both;margin-bottom: 10px}
.sideInf:last-child {margin-bottom: 0;}
.side-inf-imgBl {overflow: hidden;position: relative; height:140px; border: 1px solid #d1d1d1;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;}
.side-inf-imgBl img{width: 288px; height: 140px;}
.side-inf-imgBl:hover {border: 1px solid #2d6dd9;}
.side-inf-imgBl-title {position: absolute;left: 1px; bottom:1px;display: block; background: rgba(0,0,0,0.6) 0%;width: 290px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;}
.sideInf:hover > .side-inf-imgBl > .side-inf-imgBord > .side-inf-imgBl-title {background: rgba(64,122,204,0.7) 0%;}
.side-inf-imgBl-title {font-size: 14px; font-weight: normal;}
.side-inf-imgBl-title a { color: #fff;display: block;padding: 8px 15px; }
.side-inf-imgBord {border: 1px solid #fff; overflow: hidden;height: 140px;} | 