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

timssky

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

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

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

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

Shustry

  • Moderator
  • 6436
  • 743 / 3
Re: Затемнение картинки
« Ответ #1 : 28.01.2016, 12:54:57 »
*

timssky

  • Захожу иногда
  • 326
  • 0 / 0
Re: Затемнение картинки
« Ответ #2 : 28.01.2016, 13:01:55 »
Так?
нет, тут тоже затемняется весь квадрат а не сама картинка png.
*

Shustry

  • Moderator
  • 6436
  • 743 / 3
Re: Затемнение картинки
« Ответ #3 : 28.01.2016, 13:04:03 »
А в чём принципиальная разница?
*

timssky

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

LoraDi

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

timssky

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

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

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

Shustry

  • Moderator
  • 6436
  • 743 / 3
Re: Затемнение картинки
« Ответ #7 : 28.01.2016, 13:23:13 »
Вы бы сразу объяснили, что речь про png с альфа-каналом.
Вот
*

robert

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

timssky

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

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

Shustry

  • Moderator
  • 6436
  • 743 / 3
Re: Затемнение картинки
« Ответ #10 : 28.01.2016, 13:37:57 »
*

timssky

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

Shustry

  • Moderator
  • 6436
  • 743 / 3
Re: Затемнение картинки
« Ответ #12 : 28.01.2016, 13:47:43 »
Нет.. Можно играть с цветностью или с оттенками всех цветов. Залить конкретным цветом нельзя. Можно в сепию сделать. Это как зелёный, только сепия.
*

Shustry

  • Moderator
  • 6436
  • 743 / 3
Re: Затемнение картинки
« Ответ #13 : 28.01.2016, 13:54:13 »
Хотя, если так. Немного по-хитрому
*

timssky

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

Shustry

  • Moderator
  • 6436
  • 743 / 3
Re: Затемнение картинки
« Ответ #15 : 29.01.2016, 00:42:07 »
Незачто. С вендорными префиксами в новых. В старых никак и никогда.
*

Shustry

  • Moderator
  • 6436
  • 743 / 3
Re: Затемнение картинки
« Ответ #16 : 29.01.2016, 00:47:07 »
Переделал с префиксами. Проверяйте.
*

timssky

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

timssky

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

Shustry

  • Moderator
  • 6436
  • 743 / 3
Re: Затемнение картинки
« Ответ #19 : 07.02.2016, 23:19:21 »
Всё можно. Попробуйте пока самостоятельно. Нет возможности пока переделать. По-первому вопросу гуглите «фильтры ie». По-второму разметку сами можете поменять. Ну или подождите, позже сделаю.
*

timssky

  • Захожу иногда
  • 326
  • 0 / 0
Re: Затемнение картинки
« Ответ #20 : 10.02.2016, 12:26:19 »
Подождем
*

timssky

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