position:fixed messing with keyframes animation

On my website, a keyframes animation is supposed to tint in blue an image. But the position:fixed of the property making this very same image responsive seems to mess with the keyframes.

If I remove the position:fixed, the blue tint transition occurs. But when I put it back, the tint transition is white instead of blue.

For the codepen : click here

Is there any way to get both of these properties to work along ?

Here's the code :

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="hover-min.css" />
    <link rel="stylesheet" href="main.css" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script type="application/javascript" src="dist/js/jquery-2.1.4.min.js"></script>       
    <script type="application/javascript" src="dist/js/bootstrap.min.js"></script>
    <script src="script/jquery.js" type="text/javascript"></script>
    <script src="background.js" type="text/javascript"></script>
 </head>

<body>
    <div id="opacity"> <!-- DIV containing the image supposed to turn blue -->
        <img src="http://www.nexusyouthsummit.org/wp-content/uploads/2013/09/nyc-fisheye-20121.jpg" alt="" class="nyc" />
    </div>      
</body>
</html>

/* CSS */
img.nyc {
    *position:fixed; /* property messing with the blue tint transition, rendering it white unless I remove it */
    top:0;
    left:0;
    z-index:-1;
}

#opacity {
    background-color: #428BCA;
    display:inline-block;
}
#opacity img {
    height : 300px;
    opacity: 0.5;
    -webkit-animation: animation 2s linear;
    -moz-animation: animation 2s linear;
    -ms-animation: animation 2s linear;
    -o-animation: animation 2s linear;
    animation: animation 2s linear;
}

@-webkit-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}
@-moz-keyframes animation{
    from{
        opacity: 5;
    }
    to{
        opacity: 0.5;
    }
}
@-ms-keyframes animation{
    from{
        opacity: 5;
    }
    to{
        opacity: 0.5;
    }
}
@-o-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}
@keyframes animation{
    from{
        opacity: 5;
    }
    to{
        opacity: 0.5;
    }
}

Solution

Move the fixed positioning to #opacity:

#opacity {
  position: fixed;
}