Sliding captions not working - html

Question

Im using a pure css sliding caption for one of my pages. The intention is for the whole caption to slide out from the right to left when the image is hovered over.
However, it doesnt seem to be working. I based my code on http://www.hongkiat.com/blog/css3-image-captions/ ,so that the fullwidth image will have a caption. It is the "programmesimages" and "programmesimagescaption" classes.
* {
margin: 0px;
padding: 0px;
}
body{
background: url(../images/subtle_white_mini_waves.png) repeat;
}
#wrapper{
width:1180px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#programmescontent{
position:relative;
width:100%;
height:1000px;
background:#333;
z-index:-50;
margin-top:-73px;
}
.programmesimages{
position:relative;
width:100%;
height:600px;
background:#fff;
overflow:hidden;
}
.programmesimages img{
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.programmesimagescaption{
background-color:#CF0;
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
width:1180px;
height:600px;
left:1180px;
}
.programmesimages:hover .programmesimagescaption{
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
opacity: 1;
transform: translateX(-100%);
}
.programmesimages:hover img{
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
<div id="programmescontent">
<div class="programmesimages">
<img src="http://www.thevisibilityproject.com/wp-content/uploads/2014/10/TheEndAgain_288-1180x600.jpg">
<div class="programmesimagescaption">
<h3>Caption</h3>
</div>
</div>
<div id="programmescarousel">
</div>
</div>