• Страница 1 из 1
  • 1
Форум » uCoz » Помощь по uCoz » Ребят помогите
Ребят помогите
Durik921 Оффлайн
Проверенный
3
Дата: Суббота, 2015-10-10, 22:56 | Сообщение # 1
Ребят, кароче на сайт нужен красивый вид материалов для кино сайта, в колонки, колонок нужно 3х3, что б была картинка, а при наведении название.
Заранее спасибо


www.la-music.do.am - Музыкальный портал, требуется команда сайта...
Профиль
CbIPoK Оффлайн
Проверенный
37
Дата: Воскресенье, 2015-10-11, 06:41 | Сообщение # 2
Вот насчёт вывода в колонки я хз как сделать, но красивый вид есть.

Это HTML часть (подправишь, я делал для информеров)
Код
<div class="inform_block">
<div class="inform_screen">
<img src="$IMG_URL1$" alt="$TITLE$">

<div class="inform_info" align="center">
<div class="inform_info_title">
<b>$TITLE$<?if($VERSION$)?> <font color="#1ABC9C">v$VERSION$</font><?endif?></b>
</div>
<div class="inform_info_link">
<a href="$ENTRY_URL$">Просмотреть</a>
</div>
<div class="inform_info_dop">
<i class="fa fa-comments"></i> $COMMENTS_NUM$  
<i class="fa fa-eye"></i> $READS$  
<i class="fa fa-user"></i> $USERNAME$  <br>
<i class="fa fa-folder"></i> $SECTION_NAME$ » $CATEGORY_NAME$
</div>
</div>
</div>
</div>


А это в CSS
Код
.inform_info_link a {text-decoration: none; color: #000; background-color: #1ABC9C; padding: 3px 6px !important; border-radius: 3px;transition: all 0.3s ease-in 0s;border: 2px solid transparent;}
.inform_info_link a:hover {text-decoration: none; color: #1ABC9C; background-color: rgba(0, 0, 0, 0.0); border: 2px solid #1ABC9C;}

.inform_block {padding: 2px; background: #f6f6f6; width: 165px; height: 165px; box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.5); float: left; margin: 5px;}
.inform_screen {vertical-align: middle; display: table-cell; width: 165px; height: 165px; position: relative; overflow: hidden;}
.inform_screen img {height: 165px; width: 165px; object-fit: cover;}
.inform_info {width: 165px; height: 165px; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); position: absolute; left: 0; top: -100%; transition: all 200ms linear;}
.inform_block:hover .inform_info {top: 0; left: 0;}
.inform_info_title {height: 55px; padding: 5px; vertical-align: top; color: #fff; display: block;}
.inform_info_link {height: 35px; vertical-align: middle; color: #fff; display: block;}
.inform_info_dop {height: 55px; padding: 5px; vertical-align: middle; color: #fff; display: table-cell; font-size: 10px;}
.inform_info_dop i {color: #1ABC9C;}


Демо можешь глянуть тут http://bq-studio.3dn.ru/ (Не реклама ни разу.)

P.s. На главной выводятся информеры.
Профиль
Форум » uCoz » Помощь по uCoz » Ребят помогите
  • Страница 1 из 1
  • 1
Поиск: