Waypoint css transition help

I am using the waypoint css library to try and make it so when I scroll to my image in scales down in size. Unfortunately I am having no luck. I the class is being added to the element I want it to be added to but the css properties are not taking effect. I have console.logged things out to make sure that the function is being called at the right time and it is plus the class is being added so I know I have all my libraries set up properly. I just can’t figure out how to make the css class actually apply the properties.

           <div class="row">
                <div class="col-md-7 port-pix">
                    <img class="pic-left" src="../images/pic-pic.jpg">
                </div>
            </div>
.pic-left{
    transform: scale(1.5);
    transition: transform 1.3s;
}


.pic-left-visibile{
    transform: scale(1);
}
    $('.pic-left').waypoint(function(direction){
        $('.pic-left').addClass('pic-left-visible');
    }, 
        {
        offset: '50%'
    });

Hard to tell without the full code, but it looks like maybe the css from .pic-left is taking precedence over the css from .pic-left-visible. It will depend on the order in which you have them in your css.

You can ensure that the properties from .pic-left-visible override the ones from .pic-left by making the second selector more specific, e.g. using pic-left.pic-left-visible (which essentially means it will apply only to elements with both classes).

If that seems to solve it, take a look at some resources on css specificity.

Sadly that did not work. Here links to the full code:
HTML,
CSS,
JavaScript