Маскировка изображений и переход при наведении мыши на другой div JavaScript CSS - PullRequest
Новая
       18

Маскировка изображений и переход при наведении мыши на другой div JavaScript CSS

0 голосов
/ 05 июля 2018

Добрый день!

У меня есть 2 разных div с фоновыми изображениями, которые обрезаются по -webkit-clip-path: polygon original page-example:

enter image description here

#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» + hide «lens_img» или show «lens_img» + hide «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, но если вы сделаете это быстро, картинки приклеятся друг к другу (см. Тестовое изображение). Я понимаю, что это должно быть простое решение, но я не могу его найти.

enter image description here

https://codepen.io/vvohotnikov/pen/zaQyoo - пример

Основная проблема в том, что после наведения на ссылки мне нужно только движение красной и синей областей от одного угла к другому. Но за ними также отображается белая область, если вы быстро выберете другое слово.

...