<!--начало скриптов для подключения библиотеки-->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<!--конец скриптов для подключения библиотеки-->

<div class="cursor"></div>
<div class="cursor-follower"></div>
<style>
/*удаляем курсор*/
html,body {
    cursor: none!important;
}
.t-records a {
    cursor: none;
}
/*прописываем стили для нового курсора*/
/*стили для курсора*/
.cursor {
    position: absolute;
    /*цвет для курсора*/
    background: #995832;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    z-index: 99;
    transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
                0.2s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity;
    user-select: none;
    pointer-events: none;
    transform: scale(0.8);
}
/*стили для курсора, при наведение на ссылку*/
.cursor::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background-image: url("http://mirkozeppieri.emanuelepapale.com/wp-content/uploads/2018/07/project-hover-cursor.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 100%;
    opacity: 0;
}
/*размер курсора, при наведение на ссылку*/
.cursor.active {
    opacity: 1;
    transform: scale(12);
}

.cursor.active::before {
    opacity: 1;
}
/*стили для второго кружка под курсором*/
.cursor-follower {
    position: absolute;
    background: rgba(125, 125, 125, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 100%;
    z-index: 99;
    transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
                0.4s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity;
    user-select: none;
    pointer-events: none;
    transform: translate(4px, 4px);
}

.cursor-follower.active {
    opacity: 0.3;
    transform: scale(0);
}
/*стили для картинки*/
.portfolio-thumb {
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
}
.portfolio-thumb img {
    cursor: none;
    max-width: 360px;
    opacity: 1;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    transform-origin: 90% center;
}
/*стили для картинки на экранах максимальной шириной 600px*/
@media (max-width: 600px) {
  .portfolio-thumb img {
      max-width: 280px;
    }
}
/*стили для картинки при наведение*/
.portfolio-item:hover .portfolio-thumb {
    transform: translateX(-1.75rem);
}

.portfolio-item:hover .portfolio-thumb img {
    opacity: 0.7;
    transform: scale(1.2);
}
</style>
<!--скрипт для курсора и следователя (второго кружочка) за ним-->
<script>
    var cursor = $(".cursor"),
    follower = $(".cursor-follower");

    var posX = 0,
        posY = 0,
        mouseX = 0,
        mouseY = 0;

    TweenMax.to({}, 0.016, {
        repeat: -1,
        onRepeat: function() {
            posX += (mouseX - posX) / 9;
            posY += (mouseY - posY) / 9;
    
            TweenMax.set(follower, {
                css: {
                    left: posX - 20,
                    top: posY - 20
                }
            });
        
            TweenMax.set(cursor, {
                css: {
                    left: mouseX,
                    top: mouseY
                }
            });
        }
    });
</script>
<!--скрипт для действия при наведение на картинку-->
<script>
    $(document).on("mousemove", function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
    });
    $(".portfolio-item img").on("mouseenter", function() {
        cursor.addClass("active");
        follower.addClass("active");
    });
    $(".portfolio-item img").on("mouseleave", function() {
        cursor.removeClass("active");
        follower.removeClass("active");
    });
</script>

<div class="portfolio-item">
    <div class="portfolio-thumb">
        <a href="#"><img src="https://github.com/codegridweb/Change-Cursor-Animation-On-Image-Hover/blob/master/image.jpg?raw=true" 
        alt="" /></a>
    </div>
</div>