DLE движок для сайтов
При наведение курсора на блок новости в html свойство transition у меня выводит текст, но когда я переписал свой шаблон с html для DLE, и заменил текст на тег { short-story } то у меня свойство transition не работает и текст не отображает при наведении курсора на блок. HTML код с которым свойство transition работает:
<div class="rest-name"><h2>Название новости</h2></div> <div class="infobox"> <img src="img/thumb_cappellos.jpg" width="320" height="205" alt="" /> <div class="mask"> <div class=contact>Краткая новость 1</div> <div class="desc">Краткая новость 2</div> <div class="info"><a href="#" >Подробнее</a></div> </div> Шаблон shortstory.tpl с которым не всплывает текст с тега {short-story}:
<div class="rest-name"><h2>{title}</h2></div> <div class="infobox"> <img src="{image-1}" width="320" height="205" alt="" /> <div class="mask"> <div class=contact>Краткая новость 1</div> <div class="desc">{short-story}</div> <div class="info">[full-link]Подробнее[/full-link]</div> </div> * Кстати когда я в шаблон shortstory.tpl вставляю вместо тега { short-story } текст, то текст отлично работает. Думаю стиль CSS просто не ловит текст с { short-story } так как нужно поправить какое то значение в CSS. Сам не могу найти, прошу помощи. Буду очень благодарен. .infobox .mask { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; } .infobox .contact { font-family: Tahoma; font-size: 13px; font-weight:bold; text-align:center; position: relative; color: #161616; padding: 5px; } .infobox .desc { font-family: Tahoma; font-size: 13px; position: relative; color: #161616; padding: 0 5px; } .infobox .info { position: absolute; overflow: hidden; bottom:10px; left:30%; } .infobox .info a { display: inline-block; text-decoration: none; color: #fff; text-transform: uppercase; padding: 4px 7px; background: rgba(22, 22, 22, 0.9); -webkit-box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; box-shadow: 0 0 1px #fff; } .infobox a.info: hover { -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } .infobox .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-color: rgba(255, 255, 255, 1.0); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .infobox p { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .infobox a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .infobox:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .infobox:hover h2, .infobox:hover p, .infobox:hover a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .infobox:hover p { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; } .infobox:hover a.info { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; }
Источник:dle-faq.pro, DLE
Источник: smartZone
Перейти на сайт
Другие материалы на сайте b.Z - Записки о гаджетах, людях и музыке