How to postion two centered DIVs overlapping each other and be responsive? - css

Question

I am trying to position two DIVs over each other so that when the pointer hovers over the picture the top one fades to show the one underneath. I did this here: http://quaystreet.chrisloughnane.net/
I want make it responsive so the pictures would scale to the horizontal width of the mobile device. Which is no problem with one picture but as soon as I try to re-position the underneath DIV it breaks.
http://jsfiddle.net/chrisloughnane/f2NdQ/4/
Is it possible with just CSS to do what I want?
<div id='old'><img src="http://quaystreet.chrisloughnane.net/images/quay-street-old.jpg"/></div>
<div id='new'><img src="http://quaystreet.chrisloughnane.net/images/quay-street-new.jpg"/></div>
img {
max-width: 100%;
display: block;
margin: auto;
}

Answer 1

Here we go,
Live Example
CSS:
.images {
width: 100%;
position: relative;
max-width: 354px;
margin: 0 auto;
}
.images img {
position: absolute;
top: 0;
width: 100%;
max-width: 354px;
}
JavaScript:
$(document).ready(function() {
$('.images').on('mouseenter', function(){
$('.images .old').fadeOut(1000);
}).on('mouseleave', function(){
$('.images .old').fadeIn(1000);
});
});
HTML:
<div class="images">
<img class="new" src="http://quaystreet.chrisloughnane.net/images/quay-street-new.jpg">
<img class="old" src="http://quaystreet.chrisloughnane.net/images/quay-street-old.jpg">
</div>
Some things to you know:
To make each div in front of each other I am using position absolute.
I change the whole thing you did to make the div fadeOut, I think that way is more cleaner
I change your HTML to use the absolute position.
Your img will be width 100% and max-width 354px can be any value just need to be the maximum width your img will use. So when is less then 354px he will use the whole div with 100%.
Edit:
If you don't care about browser support you can use CSS3 transitions, beware no IE<10.
Here is the answer with transition

Answer 2

JavaScript it's not really necessary. You can achieve the same behaviour with a smooth CSS3 transition
.images {
position: relative;
margin: 0 auto;
}
.images img {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 354px;
-webkit-transition: opacity .8s linear 0s;
transition: opacity .8s linear 0s;
}
.images img:first-child {
z-index: 2;
}
.images img:first-child:hover {
opacity: 0;
}
example fiddle : http://jsfiddle.net/uNkY5/1/