CSS (opacity transition) working on my test site but not real site

Question

I have an opacity transition (when you hover over the slider) that works on my test site but not on the client's site. When I inspect the element (.img-overlay) it doesn't show the CSS.

The site: http://wearepaperpeople.com/

Here's my code:

.feat-item {
   position:relative;
   height:660px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display:block;
   width:100%;
   padding:17.2% 32.5%;
}
.img-overlay {
   width: 100%;
   height: 100%;
   position: absolute;
   top:0;
   left:0;
   opacity: 0;
   background-image: -webkit-linear-gradient(top,#fae615,#2e9a9c);
   background-image: -moz-linear-gradient(top,#fae615,#2e9a9c);
   background-image: -o-linear-gradient(top,#fae615,#2e9a9c);
   background-image: linear-gradient(top,#fae615,#2e9a9c);
   -webkit-transition: opacity 0.3s ease-in-out;
   -moz-transition: opacity 0.3s ease-in-out;
   -o-transition: opacity 0.3s ease-in-out;
}
.img-overlay:hover {
   opacity: .6;
}

Answer 1

I did inspect the code on the website and the code you have mentioned. It seems that the stylesheet hasn't been uploaded properly to the server or some other issue. Also add transition to image-overlay and make it background instead of background-image.

.feat-item {
  position:relative;
   height:660px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display:block;
   width:100%;
   padding:17.2% 32.5%;
}
.img-overlay {
   width: 100%;
   height: 100%;
   position: absolute;
   top:0;
   left:0;
   opacity: 0;
   background: -webkit-linear-gradient(top,#fae615,#2e9a9c);
   background: -moz-linear-gradient(top,#fae615,#2e9a9c);
   background: -o-linear-gradient(top,#fae615,#2e9a9c);
   background: linear-gradient(top,#fae615,#2e9a9c);
   -webkit-transition: opacity 0.3s ease-in-out;
   -moz-transition: opacity 0.3s ease-in-out;
   -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    }
    .img-overlay:hover {
       opacity: .6;
    }