1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 21 Ответов
  • 831 Просмотров
*

timssky

  • Давно я тут
  • 298
  • 0
Затемнение картинки
« : 28.01.2016, 12:26:12 »
Нужно сделать чтобы при наведении на png картинку она затемнялась и на ней была надпись

Нашел вот такой эффект
Спойлер
[свернуть]

Пример работы
Спойлер
[свернуть]

Тут затемняется весь блок, а как сделать чтобы только сама картинка затемнялась ?
Записан
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Re: Затемнение картинки
« Ответ #1 : 28.01.2016, 12:54:57 »
Записан
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

timssky

  • Давно я тут
  • 298
  • 0
Re: Затемнение картинки
« Ответ #2 : 28.01.2016, 13:01:55 »
Цитата: Shustry от 28.01.2016, 12:54:57
Так?
нет, тут тоже затемняется весь квадрат а не сама картинка png.
Записан
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Re: Затемнение картинки
« Ответ #3 : 28.01.2016, 13:04:03 »
А в чём принципиальная разница?
Записан
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

timssky

  • Давно я тут
  • 298
  • 0
Re: Затемнение картинки
« Ответ #4 : 28.01.2016, 13:04:49 »
 тут также, как в примере с яблоком, затемняется не само яблоко а полностью картинка, хотя фон прозрачный стоит.  Нужно чтобы при наведении темнело только яблоко а не фон
Записан
*

LoraDi

  • Осваиваюсь на форуме
  • 28
  • 3
Re: Затемнение картинки
« Ответ #5 : 28.01.2016, 13:05:05 »
Цитата: timssky от 28.01.2016, 13:01:55
нет, тут тоже затемняется весь квадрат а не сама картинка png.
там как раз затемняется именно картинка... значит Вам нужно по другому... как написали так Вам товарищ Shustry и сделал...
Записан
*

timssky

  • Давно я тут
  • 298
  • 0
Re: Затемнение картинки
« Ответ #6 : 28.01.2016, 13:10:48 »
Вот пример, это вышеуказанный код от Shustry

https://jsfiddle.net/timssky/f44j3233/

Заливается весь квадрат а не само яблоко
« Последнее редактирование: 28.01.2016, 13:17:40 от timssky »
Записан
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Re: Затемнение картинки
« Ответ #7 : 28.01.2016, 13:23:13 »
Вы бы сразу объяснили, что речь про png с альфа-каналом.
Вот
Записан
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

robert

  • Профи
  • 4078
  • 376
Re: Затемнение картинки
« Ответ #8 : 28.01.2016, 13:24:46 »
А что вы хотели? Фон же черный, делайте его прозрачным. Это подойдет?
Записан
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.
*

timssky

  • Давно я тут
  • 298
  • 0
Re: Затемнение картинки
« Ответ #9 : 28.01.2016, 13:32:50 »
Цитата: Shustry от 28.01.2016, 13:23:13
Вы бы сразу объяснили, что речь про png с альфа-каналом.
Вот
 
Именно это я и имел ввиду, спасибо Вам !

А можно сделать чтобы при наведении весь контур яблока заливался определенным цветом, например зеленым ?
Записан
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Re: Затемнение картинки
« Ответ #10 : 28.01.2016, 13:37:57 »
Записан
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

timssky

  • Давно я тут
  • 298
  • 0
Re: Затемнение картинки
« Ответ #11 : 28.01.2016, 13:41:16 »
не сам контур а все яблоко полностью зеленое по контуру
Записан
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Re: Затемнение картинки
« Ответ #12 : 28.01.2016, 13:47:43 »
Нет.. Можно играть с цветностью или с оттенками всех цветов. Залить конкретным цветом нельзя. Можно в сепию сделать. Это как зелёный, только сепия.
Записан
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Re: Затемнение картинки
« Ответ #13 : 28.01.2016, 13:54:13 »
Хотя, если так. Немного по-хитрому
Записан
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

timssky

  • Давно я тут
  • 298
  • 0
Re: Затемнение картинки
« Ответ #14 : 29.01.2016, 00:33:23 »
Спасибо огромное, а в Internet Explorer он не будет работать ?
Записан
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Re: Затемнение картинки
« Ответ #15 : 29.01.2016, 00:42:07 »
Незачто. С вендорными префиксами в новых. В старых никак и никогда.
Записан
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Re: Затемнение картинки
« Ответ #16 : 29.01.2016, 00:47:07 »
Переделал с префиксами. Проверяйте.
Записан
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

timssky

  • Давно я тут
  • 298
  • 0
Re: Затемнение картинки
« Ответ #17 : 03.02.2016, 19:43:53 »
в  11 explorer не работает
« Последнее редактирование: 07.02.2016, 22:57:39 от timssky »
Записан
*

timssky

  • Давно я тут
  • 298
  • 0
Re: Затемнение картинки
« Ответ #18 : 07.02.2016, 22:57:46 »
 И еще вопрос, а возможно текст вынести в HTML ? потому что у каждой картинки будет свой текст. Не удобно постоянно в CSS лазить
Записан
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Re: Затемнение картинки
« Ответ #19 : 07.02.2016, 23:19:21 »
Всё можно. Попробуйте пока самостоятельно. Нет возможности пока переделать. По-первому вопросу гуглите «фильтры ie». По-второму разметку сами можете поменять. Ну или подождите, позже сделаю.
Записан
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

timssky

  • Давно я тут
  • 298
  • 0
Re: Затемнение картинки
« Ответ #20 : 10.02.2016, 12:26:19 »
Подождем
Записан
*

timssky

  • Давно я тут
  • 298
  • 0
Re: Затемнение картинки
« Ответ #21 : 22.02.2016, 07:53:43 »
up
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Сделал чтоб картинки выезжали средствами wow получается горизонтальная прокрутка

Автор stendapuss

 Ответов: 2
Просмотров: 156 		Последний ответ 07.08.2017, 22:09:22
от stendapuss
Вывод картинки в модуле Материалы-Самые читаемые

Автор skytype

 Ответов: 3
Просмотров: 141 		Последний ответ 24.07.2017, 11:42:19
от NewUsers
Версия сайта для слабовидящих, вывод картинки

Автор sibdes

 Ответов: 3
Просмотров: 897 		Последний ответ 18.06.2017, 11:43:47
от alya22
В социальных сетях выводятся не те картинки

Автор joomla-irinka

 Ответов: 6
Просмотров: 206 		Последний ответ 09.03.2017, 14:49:28
от dmitry_stas
Съехали (вылезли и уменьшились картинки)

Автор D1g1t3x

 Ответов: 1
Просмотров: 147 		Последний ответ 29.11.2016, 13:28:41
от D1g1t3x