HTML/CSS three stacked/offset images - html

Question

I am having trouble with stacking images in HTML/CSS for some reason. I have three slides, stacked on top of each other, slightly offset so that they peak out from under one another, bottom-to-top. The animation I am using should allow them to slide over to the right when I hover on the edge that is "peaking out." It works perfectly with two images, but for some reason, when I added a third to the pile, the animation for the bottom two stopped working. NO CLUE why this won't work.
Here is the code:
#containerContainer {
position: relative;
}
#instashContainer,
#wisdomCotainer,
#visContainer {
position: absolute;
height: 744px;
width: 1860px;
overflow: hidden;
}
#instashContainer img,
#wisdomContainer img,
#visContainer img {
opacity: .7;
position: absolute;
left: 0px;
top: 0px;
transform: translate3d(-1600px, 0px, 0px);
transition: transform .6s ease-in-out;
}
#instashContainer img:hover,
#wisdomContainer img:hover,
#visContainer img:hover {
transform: translate3d(0px, 0px, 0px);
}
<div id="containerContainer">
<!--Inspiration Slidepage-->
<div id="instashContainer">
<img src="instash_slidepage.jpg" height=744 width=1820>
</img>
</div>
<!--Wisdom Slidepage-->
<div id="wisdomContainer">
<img src="wisdom_slidepage.jpg" height=744 width=1780>
</img>
</div>
<!--Visualization Slidepage-->
<div id="visContainer">
<img src="visualization_slidepage.jpg" height=744 width=1740>
</img>
</div>
</div>
When I add the third image, on top of the other two, the animation for the other two stops working, but the animation for the top image works (i.e. it slides to the right). When I remove the top image, but change nothing else, the animation for the other two works again.
Why? Also, how can I add this third image without impacting the animation of the other two images?

Answer 1

Problem
you have a typo here: #wisdomCotainer, should be#wisdomContainer
Notes
don't use HTML tags width/height, use instead CSS
<img> tag are self-closed tags, therefore don't need </img>
and you can simplify your CSS in this case by using the direct child selector >
#containerContainer {
position: relative;
}
#containerContainer > div {
position: absolute;
height: 744px;
width: 1860px;
overflow: hidden;
}
#containerContainer > div img {
opacity: .7;
position: absolute;
left: 0px;
top: 0px;
transform: translate3d(-1600px, 0px, 0px);
transition: transform .6s ease-in-out;
height: 744px;
width: 1820px;
}
#containerContainer > div img:hover {
transform: translate3d(0px, 0px, 0px);
}
<div id="containerContainer">
<!--Inspiration Slidepage-->
<div id="instashContainer">
<img src="//lorempixel.com/1280/744" />
</div>
<!--Wisdom Slidepage-->
<div id="wisdomContainer">
<img src="//lorempixel.com/1280/744" />
</div>
<!--Visualization Slidepage-->
<div id="visContainer">
<img src="//lorempixel.com/1280/744" />
</div>
</div>

Answer 2

You've got a typo error here :
#instashContainer, #wisdomCotainer, #visContainer {
}
Should be #wisdomContainer instead.