Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
reketir
0 / 0 / 0
Регистрация: 16.02.2011
Сообщений: 27
1

Сделать блоки как на сайте

13.11.2014, 05:56. Просмотров 1048. Ответов 1
Метки нет (Все метки)

Добрый вечер! Помогите начинающему прогеру. Ни как не могу сделать задание. Есть сайт www.bliink.tv, на главной странице сайта есть 6 блоков из картинок, при наведении на которые появляется информация. Мне нужно сделать такие же 6 блоков с такими же эффектами. Помогите. Нужен код html + css.
Заранее спасибо! Очень срочно.

Добавлено через 10 минут
Сделал несного, но при наведении ни чего не выходит, просто цвет картинки меняется на черно-белый, по идее картинка должна заменяться другой картинкой или стилем с надписью.

Вот код HTML:

HTML5
1
2
3
4
<div class="rollover"></div>
<div class="rollover"><a href="http://demo.edelsi.kz"><img class="alignleft size-full wp-image-575" src="http://demo.edelsi.kz/wp-content/uploads/2014/11/11.jpg" alt="5" width="380" height="200" /></a></div>
<div class="bw pic"><a href="http://demo.edelsi.kz/wp-content/uploads/2014/11/55.jpg"><img class="alignleft size-full wp-image-574" src="http://demo.edelsi.kz/wp-content/uploads/2014/11/55.jpg" alt="4" width="380" height="200" /></a></div>
<div class="bw pic"><a href="http://demo.edelsi.kz/wp-content/uploads/2014/11/66.jpg"><img class="a.rollover" src="http://demo.edelsi.kz/wp-content/uploads/2014/11/66.jpg" alt="6" width="380" height="200" /></a></div>

Вот код CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
/Эффект затемнения/
.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.bw:hover {
  -webkit-filter: grayscale(100%);
}
Добавлено через 8 часов 53 минуты
Люди добрые помогите
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.11.2014, 05:56
Ответы с готовыми решениями:

Как сделать блоки по центру?
Вообщем, тема такая... практически на любом сайте, при его уменьшение масштаба, находится по...

Как сделать такие блоки?
Здравствуйте! Помогите пожалуйста сделать такой вот блок, уже убил на это 3 часа, не могу...

Как сделать такие блоки
Хочу сделать вот такой вид материалов. Пытался делать всяко разно, но блоки друг к другу &quot;не...

Как сделать блоки подряд
Не понимаю, как сделать что-бы блоки шли подряд, а не в столбик body { background-color:#fff;...

Как блоки сделать фиксированными?
Как сделать блоки, которые по середине фиксированными, чтобы на 1 строке 3 блока, на второй тоже 3....

1
monochromer
411 / 373 / 163
Регистрация: 03.01.2013
Сообщений: 966
13.11.2014, 07:12 2
Что-то подобное уже было
При наведении поверх картинки фон определённого цвета
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.11.2014, 07:12

Как сделать, чтобы блоки не разъезжались?
Как сделать, чтобы, при изменении масштаба и на разных экранах, блоки не меняли свою высоту, каждый...

Как сделать блоки с одинаковой высотой
Подскажите современные способы вёрстки, а то я малость отстал от жизни. Если конкретнее, и...

Как на CSS сделать блоки одинаковой высоты
Добрый день Уважаемые кодеры и дизайнеры! У меня такая задача: Есть условно говоря два рядом...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru