How to align two images to be on top of each other - html

Question

I am trying to put two images on top of each other and then fade between them on hover...however I can't align them correctly. How do I best do this? It's difficult because I have centered the first image and it's within a cell......
I'm trying to align the ones in box1
.logo1 {
background-image: url("http://res.cloudinary.com/pisojjj/image/upload/v1481695899/ACE-white_pcfefd.png");
width: 400px;
height: 100%;
background-size:contain;
background-repeat: no-repeat;
margin: 0 auto;
padding: 10px;
position: relative;
opacity: 1;
-webkit-transition: all 800ms ease-in-out;
-moz-transition: all 800ms ease-in-out;
-o-transition: all 800ms ease-in-out;
transition: all 800ms ease-in-out;
}
.logo1bg {
background-image: url("http://res.cloudinary.com/pisojjj/image/upload/v1481695899/Ace-colour_qjb911.png");
background-repeat: no-repeat;
width: 400px;
height: 100%;
margin: 0 auto;
padding: 10px;
position: absoulte;
top: 0;
left: 0;
}
Codepen will help a lot with this.
http://codepen.io/pisoj1/pen/dOgjmJ
Also I have a request if someone knows how to do it quickly when looking at the pen...when it goes responsive, box1 is presently the top middle box that gets placed on top of the stack...I want box5 to do that now instead of box1, any suggestions on how to do that? Thank you

Answer 1

You can remove the second div and put the change the background image of .logo1 on hover
.box1:hover .logo1 {
background-image: url("http://res.cloudinary.com/pisojjj/image/upload/v1481695899/Ace-colour_qjb911.png");
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
http://codepen.io/anon/pen/WoaKLe

Answer 2

Why you added background-size: contain;?
I have modified it, check Codepen
.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9 {
width: 400px;
height: 100%;
background-repeat: no-repeat;
margin: 0 auto;
padding: 10px;
position: absolute;
opacity: 1;
-webkit-transition: all 800ms ease-in-out;
-moz-transition: all 800ms ease-in-out;
-o-transition: all 800ms ease-in-out;
transition: all 800ms ease-in-out;
}
http://codepen.io/anon/pen/RoeBve?editors=1100