CSS in HTML

It controls only the 3 photos because those are the only three with animation keyframes applied.  The other animations (for .bottom) essentially have nothing changed.  So, while they are technically going through an animation, there is no difference to see.

you do NOT need the CSS in any image like this -
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
         transition: opacity 1s ease-in-out;

That CSS is only used for changes in CSS opacity by javascript on a page, , BUT it makes NO difference , and is NOT needed for CSS keyframes  animations.


Also the keyframes CSS definition you use Will NOT work in firefox, -
 @keyframes crossfadeFadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

because I tried it, and got nothing, no fade at all, You incorrectly set the opacity levels, and I also think you have not used proper percentage points.

Did you try my html and css ?

AND you have images with the   class="bottom"   but do not have ANY CSS for the bottom class attributes, so the  class="bottom"  does not do anything that I can tell.