Простой Fade с помощью CSS3

Fade CSS3

Подсмотрел простой способ затемнения картинок и текста, решил записать для себя на память. Может кому-то еще пригодится. Принцип работы достаточно прост, спасибо css3 который позволяет не загружать дополнительные библиотеки для использования простых эффектов. Удобно таким способом затенять какие-то объекты дизайна, которые либо добавлены после верстки макета и не планировались в этом месте, либо используются в тексте и чтобы не отвлекать от текста так же притеняются. В прочем, это только то, что я мог придумать, вполне возможно Вам будет необходимо использовать этот код в других целях, напишите об этом в комментариях. [mantra-pullquote align="left|center|right" textalign="left|center|right" width="95%"] Данный код при наведении курсора на картинку затемняет изображение. Вставляем в файл стиля (style.css) страницы этот код:


.fade { opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .fade:hover { opacity: 0.5; }

Либо вставляем его непосредственно перед блоком использования, это конечно некорректный способ, но тем не менее иногда пригождается.

Вставляем код картинки:

Аналогично вставляем код текста: This is my text element that will fade when you hover over it. [/mantra-pullquote] Если в CSS коде изменить данные, то можно наоборот при наведении текст/картинку делать яркой. Для этого нужно изменить opacity: 1; в блоке Hover и в блоке Fade сделать opacity: 0.5.