悬停其他div JavaScript CSS上的图像遮罩和过渡

Question

美好的一天！

我有2个不同的div，它们的背景图像都被-webkit-clip-path裁剪：多边形原始页面示例：

#model_img{
    position: absolute;
    height: 100vh;
    background: url(/img/blue-eyes-237438_1920.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right;
    background-size:cover;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    float: left;
    transition: -webkit-clip-path 2s, background-position 2s;
    -webkit-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 100%);
}

#lens_img{
    position: absolute;
    height: 100vh;
    background: url(/img/lens-490806_1920.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    float: left;
    transition: -webkit-clip-path 2s, background-position 2s;
    -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 100%, 100% 0%);}

将鼠标悬停在“模型”或“摄影师”上时，图像之间的径向边界应移至左上角或右下角，并分别显示“ model_im” +隐藏“ lens_img”或显示“ lens_img” +隐藏“ model_im”。

$(document).ready(function(){
    $(function() {
      $('#photografer').hover(function() {  
        $('#lens_img').css('-webkit-clip-path', 'polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%)');
        $('#model_img').css('-webkit-clip-path', 'polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%)');
        }, function() {
        // on mouseout, reset the background colour
        $('#model_img').css('-webkit-clip-path', 'polygon(0% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 100%)');
        $('#lens_img').css('-webkit-clip-path', '');
        $('#lens_img').css('background-position', '');
      });
});
     $(function() {
      $('#model').hover(function() {
        $('#model_img').css('-webkit-clip-path', 'polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 100% 100%)');
        $('#lens_img').css('-webkit-clip-path', 'polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%)');
        }, function() {
        // on mouseout, reset the background colour
        $('#lens_img').css('-webkit-clip-path', 'polygon(100% 0%, 100% 100%, 0% 100%, 0% 100%, 100% 0%)');
        $('#model_img').css('-webkit-clip-path', '')
        $('#model_img').css('background-position', '');
      });
});
});

我添加了一些jQuery，但是如果您快速完成操作，图片将相互粘合（请参见测试图片）。我知道这应该是一些简单的解决方案，但我找不到它。

https://codepen.io/vvohotnikov/pen/zaQyoo-示例

主要问题是，悬停在链接上后，我只需要从一个角到其他区域移动红色和蓝色区域即可。但是，如果您很快选择其他字词，也会在它们后面显示白色区域。