Переход на 5 изображениях ⇐ CSS

[Anonymous]

Мне дана следующая задача:

Настоящий HTML-код, который у меня есть: Два изображения наложены друг на друга.( ниже html), когда пользователь наводит курсор на изображение переднего плана, в соответствии с правилами CSS непрозрачность будет переведена в 0 через 4 секунды, и это будет происходить циклически.

Скрипка

Модификация, которую мне нужно сделать: Теперь мне нужно проделать то же самое для 5 изображений. Я пробовал сделать то же самое, что и ниже, но безуспешно (см. второй фрагмент кода). Есть какие-нибудь подсказки о том, как это можно сделать только с помощью css? спасибо

Fiddle2





Melting Images

#cover
{
position: relative;
margin: 0 auto;
}
#cover img
{
position: absolute;
left: 0;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
#cover img.top:hover
{ opacity:0; }











Что я пробовал




Melting Images

#cover
{
position: relative;
margin: 0 auto;
}
#cover img
{
position: absolute;
left: 0;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
#cover img.top:hover
{ opacity:0; }

#cover img.top1:hover
{ opacity:0; }

#cover img.top2:hover
{ opacity:0; }

#cover img.top3:hover
{ opacity:0; }















Подробнее здесь: https://stackoverflow.com/questions/219 ... n-5-images