Crossfade 3 изображения при наведении

Question

Я не мог найти решение этой проблемы, поэтому надеюсь, что кто-нибудь мне поможет.

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

Мышь над | Исходное изображение> Изображение 2 > Изображение 3 | Стоп

Мышь вне | Изображение 3 > Изображение 2 > Исходное изображение | Стоп

Я думаю, что было бы лучше всего использовать JQuery, но любые решения приветствуются.

http://css3.bradshawenterprises.com/cfimg/

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

ОБНОВИТЬ

Я думаю, что я сделал это с помощью CSS, на основе демонстрации 1 с этого сайта, я сделал это

#Logo {position:absolute; z-index: 1; width: 250px; height: 120px;}
#Logo:after {content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: url(images/Logo3.png); opacity: 0;
transition: opacity .5s ease-in-out;}
#Logo:hover:after {opacity: 1;
transition: opacity .5s .65s ease-in-out;}
#Logo img.A {position:absolute;
transition: opacity .5s .65s ease-in-out;}
#Logo img.A:hover {opacity: 0;
transition: opacity .5s ease-in-out;}

<div id="Logo"><img class="A" src="images/Logo.png"><img src="images/Logo2.png"></div>

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