Как сделать затухание картинки с боков к центру?

Question

[SkyWayx]

Здравствуйте, подскажите пожалуйста, есть картинка с логотипом, нужно сделать, чтобы она постепенно затухала(исчезала), от краёв к центру. Как это можно реализовать? или может есть какой готовы скрипт?

Answer 1

[Андрей Голуменов]

Проще всего в фотошопе.
И что значит от краев к центру? В центре прозрачная по краям непрозрачная или наоборот? Я что-то запутался.
Фон под картинкой однотонный? Если да можно попробовать накинуть сверху градиентную заливку через :after

Comments

[SkyWayx]

Фотошоп тут не подойдёт. Нужна анимация. Тоесть Вот отрисовывается весь логотип, а потом постепено слева и справо одновремено, от краю к центру начинает исчезать

[Андрей Голуменов]

codepen.io/golumenov/pen/kxDcs?editors=010
Можно так, наведите на картинку

[SkyWayx]

Это как я понял радиальный градиент. Это не подойдёт. Логотип одной Строкой большой, и надо чтобы не от середины пропадал, а к середине

[Андрей Голуменов]

Или так codepen.io/golumenov/pen/LxFIv?editors=010

[Андрей Голуменов]

Ну или так. с боков в центр codepen.io/golumenov/pen/oDzec?editors=010

[SkyWayx]

Это хорошо смотрится на белом фоне, а если фон полностью чёрный, то на его месте остаётся белый прямоугольник..

[Андрей Голуменов]

Вуаля codepen.io/golumenov/pen/yKDFC

[SkyWayx]

ЗДорово) практически то что надо, а не подскажите тогда как ещё сделать, чтобы после затухания на этом месте появлялась другая картинка, и всё это было не при наведение мыши, а при загрузке страницы?:

[SkyWayx]

Вопрос всё ещё актуален( может есть у кого решение?

[SkyWayx]

@Golumenov Здравствуйте, подскажите пожалуйста, не работает ваше решение с градиентов в IE 9, не подскажите как исправить?( очень надо(((

Answer 2

[A K]

Подобное уже писалось на тостере

jsfiddle.net

Comments

[SkyWayx]

тоже совсем не подходит, там заливка цветом фона происходит, а нужно, чтобы под любой фон. И опять же, здесь градиент радильный градиент, а нужно как в строке, слева направо и справо на лево