hover-эффект при наведении на изображение в списке (в плитке)

InstantCMS 2.X
#1 1 апреля 2019 в 21:48
Приветствую!

Обыскался-перепробовал варианты – пока не получается.

Как сделать так, что, когда наводишь мышкой на изображение в списке записей (список плиткой, шаблон new3), чтобы изображение становилось ярче (не блеклым, не темнее).
#2 1 апреля 2019 в 21:54
У вас что то конкретно не получается? или вы не знаете как это вообще сделать?
#3 1 апреля 2019 в 21:57


У вас что то конкретно не получается? или вы не знаете как это вообще сделать?

Killer's dream
Вообще. По-дилетантски различные варианты пробую, но видимо не с того бока захожу.
#4 1 апреля 2019 в 22:16

По-дилетантски различные варианты пробую

Polzovinst
Ну если пробуете значит уже что то есть, наверно изначально уже картинку затемнили? прежде чем

чтобы изображение становилось ярче

Polzovinst
#5 1 апреля 2019 в 22:27
Killer's dream, я просто из сети брал коды hover-эффектов, и тулил "на своё усмотрение" в styles-list.css

У вас есть рабочий вариант (конкретный код)? И куда его вставлять?

Притом, код для осветления я так и не нашёл.
#6 1 апреля 2019 в 22:37
Вот, например, я как-то давно на сайте dares58.ru делал из цветных черно-белые изображения у категорий.
Использовал filter: grayscale(100%)
Попробуйте поэкспериментировать с filter. Вот много примеров html5book.ru/css3-filtry/
#7 1 апреля 2019 в 22:41


Вот, например, я как-то давно на сайте dares58.ru делал из цветных черно-белые изображения у категорий.
Использовал filter: grayscale(100%)
Попробуйте поэкспериментировать с filter. Вот много примеров html5book.ru/css3-filtry/

islyaeFF
Спасибо. Уже очень ближе. Сейчас надо разобраться что куда.
#8 1 апреля 2019 в 22:47
islyaeFF, получается сразу вначале кода.

В какую строку лучше вставить
filter: grayscale(100%)
saturate(300%)
?

#9 1 апреля 2019 в 22:57


В какую строку лучше вставить
filter: grayscale(100%)
saturate(300%)
?

Polzovinst

С бекграундами наверное не работает. Я не пробовал

у меня вот так
#10 1 апреля 2019 в 23:37
islyaeFF, спасибо за подсказку!

Правильное направление хоть уже видно.

Польза даже хотя бы в том, что я в общем решил у изображений увеличить яркость


Но вот именно с hover пока недоразобрался

Что не так леплю, это понятно, но может и не туда.
#11 1 апреля 2019 в 23:46
Вот 2 момента



для плавности эффекта можно в верхний добавить еще transition: all 0.5s;
#12 1 апреля 2019 в 23:58
Пока никак не хочет

#13 2 апреля 2019 в 00:12


Пока никак не хочет

Polzovinst

мешает пробел между a :hover
надо писать слитно a:hover
#14 2 апреля 2019 в 00:18



Пока никак не хочет

Polzovinst

мешает пробел между a :hover
надо писать слитно a:hover

islyaeFF
Ё-моё свершилось!!))
Опять долго решаемое (нерешаемое) сравнительно быстро решилось,
благодаря знающим людям.

Вот это Вы помогли дилетанту)
Спасибо!)
Тут уже есть ник "Диллетант", надо было назваться "Диллетант2")

Напишите тут или в личке номер своего киви, яндекса или WebMoney, вышлю вам благодарственную шоколадку)
#15 2 апреля 2019 в 00:39
Polzovinst, благодарю за шоколадку.
Я и не думал, что вот так на форуме можно рубить бабло))
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.