Image transition is only catching at 2 & 4

Image transition is only catching at 2 & 4

I've had some problems with my image transition and its only working
correctly when the 1 and 3 buttons are clicked on but when the 2 and 4 are
clicked on they get stuck and you can see it gets caught up by the other
images before it. I need it to smooth transition for all images not just 2
and get stuck on the other 2
I want it to look like this:
http://tympanus.net/Tutorials/CSS3SlidingImagePanels/index.html
I'm attaching my css to it, but you can also go here to see it in action.
Of course its had some revisions to make it work for the content I have.
But any help would be great. Thanks!!
http://ricapeeka.com/tester/
.cr-container {
width: 960px;
height: 600px;
position: relative;
margin: 0 auto;
text-align: center;
}
.cr-container label {
font-style: italic;
width: 240px;
height: 30px;
cursor: pointer;
color: #fff;
line-height: 32px;
font-size: 24px;
float: left;
position: relative;
margin-top: 35px;
z-index: 1000;
}
.cr-container label:before {
content: '';
width: 34px;
height: 34px;
background: #1D3867;
position: absolute;
left: 50%;
margin-left: -17px;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(255,255,255,0.3);
z-index: -1;
}
.cr-container label:after{
width: 1px;
height: 400px;
content: '';
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%,
rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1)
0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1)
0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1)
0%,rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1)
0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#ffffffff', endColorstr='#00ffffff',GradientType=0 );
position: absolute;
bottom: -20px;
right: 0px;
}
.cr-container label.cr-label-img-4:after{
width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4 {
color: #1D3867;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~
label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~
label.cr-label-img-4:before {
background: #fff;
box-shadow: 0 0 0 4px #1D3867;
}
.cr-container input {
display: none;
}
.cr-bgimg {
width: 960px;
height: 600px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.cr-bgimg {
background-repeat: no-repeat;
background-position: 0 0;
}
.cr-bgimg div {
width: 240px;
height: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
}
.cr-bgimg div span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -240px;
z-index: 2;
text-indent: -9000px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1) {
background-image:
url(/wp-content/uploads/2013/09/Education-Page-Element-26.png);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2) {
background-image:
url(/wp-content/uploads/2013/09/Education-Page-Element-27.png);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3) {
background-image:
url(/wp-content/uploads/2013/09/Education-Page-Element-28.png);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4) {
background-image:
url(/wp-content/uploads/2013/09/Education-Page-Element-29.png);
}
.cr-bgimg div:nth-child(1) span {
background-position: 0 0;
}
.cr-bgimg div:nth-child(2) span {
background-position: -240px 0;
}
.cr-bgimg div:nth-child(3) span {
background-position: -480px 0;
}
.cr-bgimg div:nth-child(4) span {
background-position: -720px 0;
}
.cr-container input:checked ~ .cr-bgimg div span {
-webkit-animation: slideOut .6s ease-in-out;
-moz-animation: slideOut .6s ease-in-out;
-o-animation: slideOut .6s ease-in-out;
-ms-animation: slideOut .6s ease-in-out;
animation: slideOut .6s ease-in-out;
}
@-webkit-keyframes slideOut {
0% {
left: 0;
}
100% {
left: 150px;
}
}
@-moz-keyframes slideOut {
0% {
left: 0;
}
100% {
left: 150px;
}
}
@-o-keyframes slideOut {
}
100% {
left: 150px;
}
}
@keyframes slideOut {
0% {
left: 0;
}
100% {
left: 150px;
}
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div
span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div
span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div
span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div
span:nth-child(4) {
-webkit-transition: left .5s ease-in-out;
-moz-transition: left .5s ease-in-out;
-o-transition: left .5s ease-in-out;
-ms-transition: left .5s ease-in-out;
transition: left .5s ease-in-out;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
left: 0;
z-index: 10;
}
.cr-titles h3 {
color: #fff;
text-shadow: 1px 1px 6px #333;
}
.cr-titles h3 span {
z-index: 10000;
position: absolute;
width: 94.5%;
left: 0;
text-align: center;
opacity: 0;
top: 50%;
-webkit-transition: opacity .8s ease-in-out;
-moz-transition: opacity .8s ease-in-out;
-o-transition: opacity .8s ease-in-out;
-ms-transition: opacity .8s ease-in-out;
transition: opacity .8s ease-in-out;
}
.cr-titles h3 span:nth-child(1) {
font-family: texgyreadventor, Arial, sans-serif;
font-size: 60px;
display: block;
letter-spacing: 7px;
line-height: 40px;
}
.cr-titles h3 span:nth-child(2) {
margin-top: 69px;
background-image:
url(/wp-content/uploads/2013/09/Education-Page-Element-30.png),
url(/wp-content/uploads/2013/09/Education-Page-Element-31.png);
height: 53px;
font-size: 20px;
padding: 26px;
font-style: italic;
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD",
Georgia, serif;
}
.cr-container input:checked ~ .cr-titles h3 span:nth-child(1) {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles
div:nth-child(1) span:nth- child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles
div:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles
div:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles
div:nth-child(4) span:nth-child(1),
.cr-container input.cr-selector-img-1:checked ~ .cr-titles
div:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles
div:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles
div:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles
div:nth-child(4) span:nth- child(2) {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.collegesFrameDescription {
display: block;
width: 900px;
padding: 10px 30px;
color: #fff;
font-size: .85em;
position: absolute;
height: 125px;
z-index: 9;
bottom: 0;
opacity: 0;
text-align: left;
-moz-column-count: 3;
-webkit-column-count: 3;
-ms-column-count: 3;
column-count: 3;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-ms-column-gap: 20px;
column-gap: 20px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles
div:nth-child(1) .collegesFrameDescription,
.cr-container input.cr-selector-img-2:checked ~ .cr-titles
div:nth-child(2) .collegesFrameDescription,
.cr-container input.cr-selector-img-3:checked ~ .cr-titles
div:nth-child(3) .collegesFrameDescription,
.cr-container input.cr-selector-img-4:checked ~ .cr-titles
div:nth-child(4) .collegesFrameDescription {
opacity: 1;
-webkit-transition: opacity .8s ease-in-out;
-moz-transition: opacity .8s ease-in-out;
-o-transition: opacity .8s ease-in-out;
-ms-transition: opacity .8s ease-in-out;
transition: opacity .8s ease-in-out;
}
}