<a class="github-source" href="https://github.com/speeedsam/Filtering"  target="_blank">Fork me on GitHub</a>

    <!--<a class="github-source" href="https://github.com/speeedsam/Hello---Animated-Contact-Form"  target="_blank"><i class="fa fa-github"></i>Fork me on GitHub</a>-->
    <!-- HEADER -->
    <header>
        <h1>Filtering - CSS3 Filter Hover Effects - V1</h1>
        <p>CSS3 effects filter with CSS3 Transitions and Animations</p>

        <!-- SOCIAL -->
        <div class="social">
            <div class="social-button">
            	<iframe src="http://ghbtns.com/github-btn.html?user=speeedsam&repo=Filtering&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="70" height="20"></iframe>
            </div>
            <div class="social-button">
            	<a href="https://twitter.com/share" class="twitter-share-button" data-related="IanLunn" data-dnt="true">Tweet</a>
            </div>
        </div>
        <!-- END OF SOCIAL -->
        <ul>
    <li><a target="_parent" href="https://codepen.io/speeedsam/pen/mPKMJJ">Demo #1</a></li>
    <li><a target="_parent" href="https://codepen.io/speeedsam/pen/MyXvKV">Demo #2</a></li>
    <li><a target="_parent" href="https://codepen.io/speeedsam/pen/zqadBM">Demo #3</a></li>
    <li><a target="_parent" href="https://codepen.io/speeedsam/pen/oxyezK">Demo #4</a></li>
    <li><a target="_parent" href="https://codepen.io/speeedsam/pen/mPKMRV">Demo #5</a></li>
    <li class="active"><a target="_parent" href="https://codepen.io/speeedsam/pen/zqadZy">Demo #6</a></li>
    <li><a target="_parent" href="https://codepen.io/speeedsam/pen/wGXqed">Demo #7</a></li>
    <li><a target="_parent" href="https://codepen.io/speeedsam/pen/LNrjrE">Demo #8</a></li>
    <li><a target="_parent" href="https://codepen.io/speeedsam/pen/BKVdJZ">Demo #9</a></li>
</ul>
        <!-- END OF /. DEMO ITEM MENU -->
    </header>
    <!-- END OF /. HEADER -->

    <!-- DEMO #1 MARKUP -->
    <div class="wrapper">
        <div class="invert box">
            <a href="#">
                <img src="https://d13yacurqjgara.cloudfront.net/users/195330/screenshots/2254877/dribbble-shot_1x.jpg" alt="Image">
            </a>
        </div>
        <div class="invert box">
            <a href="#">
                <img src="https://d13yacurqjgara.cloudfront.net/users/22883/screenshots/1495947/yakuq_workstation_1x.jpg" alt="Image">
            </a>
        </div>
        <div class="invert box">
            <a href="#">
                <img src="https://d13yacurqjgara.cloudfront.net/users/4478/screenshots/1440190/office-work-in-progress_1x.png" alt="Image">
            </a>
        </div>
        <div class="invert box">
            <a href="#">
                <img src="https://d13yacurqjgara.cloudfront.net/users/43340/screenshots/1785606/workspace_1x.jpg" alt="Image">
            </a>
        </div>
        <div class="invert box">
            <a href="#">
                <img src="https://d13yacurqjgara.cloudfront.net/users/44323/screenshots/1523686/workspace_1x.png" alt="Image">
            </a>
        </div>
        <div class="invert box">
            <a href="#">
                <img src="https://d13yacurqjgara.cloudfront.net/users/198986/screenshots/1458644/desk_1x.jpg" alt="Image">
            </a>
        </div>
    </div>
    <!-- END OF /. WRAPPER  -->
.invert img {
  -webkit-filter: invert(65%);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.invert a:hover img{
  -webkit-filter: invert(100%);
}

.invert img {
    width: 100%;
    height: auto;
    margin: 0;
    webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
        -webkit-transition: all 1s ease;
          transition: all 1s ease;
    -webkit-transform: scale(1.5, 1.5);
    -moz-transform: scale(1.5, 1.5);
    -o-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
}
.invert a:hover{
    cursor: url(https://dl.dropboxusercontent.com/u/147644213/vojonaloy/images/cursor.png), auto;
}

.invert a:hover img{
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}
Rerun