Make relative element appear before absolute element same container - html

Question

I have two images inside a div. Same width/height and an effect on hover to display the secondary element. However, the secondary image is displaying before the first one, what is not the expected behavior.
The CSS:
.div-container {
position: relative;
}
.div-container img.primary {
position: relative;
}
.div-container img.secondary {
position: absolute;
top: 0;
left: 0;
transition: opacity 1s ease-in-out;
}
.div-container img.secondary:hover {
opacity: 0;
}
The HTML:
<div class="div-container">
<img class="primary">
<img class="secondary">
</div>
The question: I want to display the primary image first.
Example: http://jsfiddle.net/A6y7Y/

Answer 1

You can either use z-index and change the values on the :hover effect or just easily switch the images. But what you should be looking for here is putting them on a single file and controlling the position of the background image with CSS like a Sprite. Here is a good example

Answer 2

Swap the css style of the primary and secondary css style and add z-index to the primary as 1 should resolve the issue
HTML
`<div class="div-container">
<div class="primary">Layer1</div>
<div class="secondary">Layer2</div>
</div>`
CSS
`.div-container {
position: relative;
}
.div-container div{
width:100px;`enter code here`
height:100px;
border:1px solid red;
}
.div-container .secondary {
position: relative;
background-color: blue;
}
.div-container .primary {
position: absolute;
top: 0;
left: 0;
transition: opacity 1s ease-in-out;
background-color: #ccc;
z-index:1;
}
.div-container .primary:hover {
opacity: 0;
}`

Answer 3

I solved the problem.
For some reason, setting opacity: 0 to the hovered image, made it appear first.
All I did was set the secondary image to opacity: 0 and the container div on hover with opacity: 1 (instead of the hovered image). I also included a z-index to both images with the secondary image with a higher index. Below the code I'm using, hope it could help someone in the future.
.div-container {
position: relative;
}
.div-container img.primary {
position: relative;
z-index: 5;
}
.div-container img.secondary {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 6;
transition: opacity 1s ease-in-out;
}
.div-container:hover img.secondary {
opacity: 1;
}