Прошу помощи!

[Onik]

Добрый день уважаемые форумчане.

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

Подскажите пожалуйста за ранее спасибо )

Изменено 9 мая, 2015 пользователем Onik

[AlexBrtn]

Не не обязательно две картинки. Правильно сделать с помощью CSS. Вроде делается через псевдо классы ::after и ::before. Точный код может подскажет кто-то другой.

Изменено 9 мая, 2015 пользователем AlexBrtn

[Onik]

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

[AlexBrtn]

Вот как обесцветить картинку 

http://htmler.ru/2014/10/21/css-transition-css3/

А для css типа такого

.logo: {чёрно белая картинка;}

.logo:before: {цветная картинка}

 

[AlexBrtn]

Вот пример - разбирай 

http://jsfiddle.net/yqvwLcr8/

...через псевдокласс :hover ) а не :before - ошибся я

ps Поменяй название темы на что-то типа "обесцвечивание изображения при наведении"  - что б другие легко находили. А то тут всем нужна помошь :)

Изменено 9 мая, 2015 пользователем AlexBrtn

[Viktar83]

Если логотип - картинка, то вот еще для примера: _htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee

Обычно делают не две картинки, а объединяют их в одну (спрайт) - чтобы не ждать загрузки второй картинки, и при наведении мышки меняют координаты для свойства background-position ( при этом картинка вставляется не через img, а через background ).

Если логотип - текст, то еще проще: всего лишь задать нужные свойства (тень, цвет) для :hover 

Изменено 9 мая, 2015 пользователем Viktar83

[AlexBrtn]

@Viktar83 А такой эффект, это с помощью скрипта делается, не в курсе?

http://interaktiv.morgenpost.de/berlin-1945-2015/

...А, всё сам увидел) JuxtaposeJS

Изменено 9 мая, 2015 пользователем AlexBrtn