바다 땅 화염 번개 라는 사진이잇다면 이사진을 css 만이용해서 마우스를 올렸을 때 번개->화염->땅-> 바다 이런식으로 계속변환하고싶은데
일단 이미지변환하는 함수같은게 없으니까 cover로 겹치게한다음에 사진에따라 각각 hover class를 주어줬는데 이방식은 사진이많으면 힘들거같은데다가
hover하고나면 이미지가 다시돌아오니안되네요... 좋은방법이있을까요?

== 소스코드 = =




change animation

.cover{
position: relative;
margin :0 auto;
}
.cover img{
;
-webkit-transition: linear 3s;
-moz-transition: linear 3s;
transition: : linear 3s;
}
.cover img.번개:hover
{
opacity: 0;
}
.cover img.화염:hover
{
opacity: 0;
}
.cover img.땅:hover
{
opacity: 0;
}