Automatic Multiple Image switch with different links on each IMG - html

Question

Background:
Finding improved ways to use CSS, I came across the proposition of using image transitions for good effects.
After a few stumbles, I managed to do this with the help of some references to make a smooth transition in hover.
Now I want it automatic and with links in each picture, but I'm at a loss at the code.
Current JSFiddle:
None, JSFIDDLE doesn't accept IMG and I can't show there.
<div class="container">
<img src="sky.jpg">
<img class="front" src="bear.jpg">
</div>
.container
{
position:relative;
height:500px;
width:500px;
margin:0 auto;
}
.container img
{
position:absolute;
transition: opacity 1s ease-in-out;
}
.container img.front:hover
{
opacity:0;
}
Problem:
This HTML-CSS works but for a single image switch (2 images) on hover, not for multiple ones automatically.
Need:
A change in the code which allows multiple switches using CSS and HTML only, with different links on each image.
I know there are possibilities with JQUERY and JAVACRIPT, I wish for a solution without these two.
Solution Code restrictions and parameters:
No JQUERY nor JAVASCRIPT
Multiple browser compatibility (doesn't need to be very old ones)
Possibility of multiple links in each image switch
Many Thanks for all help provided.

Answer 1

Try this you have to move your cursor a slight (shake it a bit) to see the change in the link notice the change in the link http://jsfiddle.net/fc3nb5rL/1/
i used z-index instead of opacity
.back {
z-index:1;
}
#-webkit-keyframes anim {
from {
z-index:1;
}
to {
z-index:-2;
}
}
.back:hover {
-webkit-animation:anim 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes anim2 {
from {
z-index:1;
}
to {
z-index:-2;
}
}
.front:hover{
-webkit-animation:anim2 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
}