Изменить фоновое изображение DIV на .hover - с затуханием

Question

Я ищу переход от одного фонового изображения к другому, используя стандартную ссылку .hover.

Пример ссылки без перехода можно увидеть здесь: http://www.makestudio.co.uk/sites/seven/

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

Answer 1

Не нужно jquery, просто CSS

<div id="thisdiv">Content</div>

CSS ...

#thisdiv { height: 200px;
width: 200px;
background-color: #600;
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s; }
#thisdiv:hover {
background-color: #006;
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s;}

jsFiddle sample

С изображениемВы можете использовать CSS для непрозрачности, чтобы затемнить изображение, а затем сделать его ярче при наведении.Вы не можете действительно исчезать между изображениями без jquery.

Answer 2

вы можете использовать jQuery, чтобы просто исчезнуть. В противном случае, если вы настаиваете на CSS, вы можете найти это несколько полезным.

Попробуйте эту ссылку JSFiddle

<!-- HTML-->
<div id="id1" class="item"><a href="#">DIV1</a></div> 
<div id="id2" class="item"><a href="#">DIV2</a></div> 
<div id="id3" class="item"><a href="#">DIV3</a></div> 
<div id="rightDiv">
<a id="id1match" class="region"> </a>
<a id="id2match" class="region"> </a>
<a id="id3match" class="region"> </a>

<div id="fakeDiv1" class="fake"><a href="#">DIV1</a></div>
<div id="fakeDiv2" class="fake"><a href="#">DIV2</a></div>
<div id="fakeDiv3" class="fake"><a href="#">DIV3</a></div>
</div>

<!--CSS -->
/* style of left side */

Answer 3

Вы можете использовать CSS-переходы, чтобы изменить непрозрачность изображения и показать другое изображение под ним.

Демо

Answer 4

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

Я бы предложил использовать Modernizr . Это js-библиотека, которая поможет вам создавать крутые эффекты для современных браузеров, а также ухудшит работу тех, которые не поддерживают вашу особую функцию.

Answer 5

Вы не можете по-настоящему выцветать изображения с помощью CSS.

Если вы хотите что-то попробовать, вы можете использовать -webkit-animate и другие специфичные для браузера префиксы для анимации непрозрачности самого элемента. Вам придется повозиться с этим.

Google CSS3 анимации для получения дополнительной информации. Вы хотите анимировать свойство opacity.