Как сменить фон transition?

Question

[vetsmen]

У меня есть div с каким-то стилем:
<div class="block"></div>

.block { background: url('../img/img.png');}
.block:hover { background: url('../img/img.png') 0 10px;}

То есть при наведении у меня просто меняются координаты этого же изображения. При использовании transition у меня просто плавно анимируется смена координат изображения, а не плавное появление. Как решить этот вопрос?
На js я бы решал это так: создал 2 блока: block, block_hover и при наведении на block я бы плавно показывал block_hover
А как такое сделать на css?

Answer 1

[xtala zen]

Плавное появление скорее всего надо реализовывать через плавное изменение прозрачности. Для этого наверное надо сверху через z-index наложить непрозрачную маску блоком, а затем через transition изменить ее альфа канал со 100% до нуля, при наведении, т.е в псевдокласе :hover . Или воспользоваться свойством display: none. Но тут не совсем понятно как будет реализовано постепенное исчезновение.

Answer 2

[Олег]

http://codepen.io/werty1001/pen/vgZPJN

Answer 3

[whoisthere]

.block { background: url('../img/img.png'); transition: all 0.3s;}
.block:hover { background: url('../img/img.png') 0 10px;}

Используйте разные картинки. У Вас transition отрабатывает на background-position.

Фидл

Comments

[vetsmen]

https://jsfiddle.net/pcvyuogj/1/
Не работает, пример выше предоставил

[whoisthere]

vetsmen: https://jsfiddle.net/pcvyuogj/2/

[vetsmen]

whoisthere: при использовании разных картинок заметна "прогрузка" той, которая появляется при наведении, поэтому этот вариант отпадает.

[whoisthere]

vetsmen: в вашем случае её не будет она сразу загрузится, я с разных сайтов урлы вставлял

Answer 4

[Stanislav QQ]

Куда проще codepen.io/anon/pen/BpZbrZ