Информер для кино сайтов
Используется только html и css. С установкой трудностей не будет. И начнем... Сам html код вставляете в удобное вам место, можете его редактировать под себя, подставлять свои операторы: [HTML]<ul class="megorand"> <li> <div class="textmeg"> <a href="#Ваша ссылка"> <span>1+1 Intouchables <span class="">(2011)</span></span> </a> <hr /> <a href="год" class="categors">2011</a> • <a href="страна" class="categors">Франция</a> • <a href="{category-url}" title="Категория" class="categors">биография, драма, комедия</a> </div> <img src="imagee.jpg" /> </li> </ul>[/HTML] И css код вставить в таблицу стилей: [CSS].megorand li { display:inline-block; float:left; list-style:none; position:relative; margin:5px; } .megorand li img { display:block; width:127px; height:175px; background:#eee; border:1px solid #fff; border-radius:5px; -moz-border-radius:5px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.35); -webkit-box-shadow:0 0 5px rgba(0,0,0,0.35); padding:6px; } .megorand li div.textmeg{ display:block; background:rgba(0,0,0,0.7); color:#fff; font-family:Arial,sans-serif; position:absolute; overflow:hidden; text-shadow:1px 1px 1px #303857; opacity:0; filter:alpha(opacity=0); -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; transition:all .3s ease-in-out; padding:10px; } .textmeg a{ color:#fff; } .megorand li:hover div.textmeg{ width:107px; height:155px; opacity:1; filter:alpha(opacity=80); text-align:center; font-weight:bold; font-size:13px; } .megorand li div.textmeg { bottom:7px; right:7px; width:0; height:0; } [/CSS] Вот и всё, ничего сложно нету.
|
Категория: 
Опубликовал: 
Используемый код:
Web-сайт автора: 
Автор: |
СКАЧАТЬ
Размер файла: 150.5 Kb
Посмотреть |
Комменты
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация ]
[ Регистрация ]
