javascript - "Image masking"缩略图 + 全尺寸图像。棘手的任务

Question

我需要设置这样的效果:

http://kaceymorrow.com/slo-fi/#Julia_Audio

当您将图像悬停在该部分时，图像会更改其大小以覆盖大部分屏幕，但请注意过渡非常平滑:大图像的位置与缩略图图像完全重合，因此它看起来像图像“发现”本身，而不是扩展。

我试过很多东西都没有成功。我没有接近解决方案的办法。

编辑:

这是我所拥有的最好的解决方案，但仍然离解决方案不近!

此脚本等待悬停在图像上以显示以该图像为背景的 DIV。问题是，图像似乎在扩展而不是“揭开”。

$(document).ready(function(){
    $('.ejemplo').hover(function(){
        console.log('hoveeeeer');
        var img = $(this).data('img');
        console.log(img);
        $('.c1').css(
            'background-image', 'url('+img+')',
        )
        $('.c1').show()
        $('.c1').css(
            'opacity', '1'
        )
        $('.ejemplo').css(
            'opacity', '0'
        )
        $('.header_highlights').css(
            'opacity', '0'
        )

        var audio1 = $(this).data('audio');
        var stereo = document.getElementById(audio1);
      //Example of an HTML Audio/Video Method
        stereo.play();
    }).mouseout(function(){
    console.log('no hover')
    $('.c1').hide()
    $('.c1').css(
        'opacity', '0'
    )
    $('.ejemplo').css(
        'opacity', '1'
    )
    $('.header_highlights').css(
        'opacity', '1'
    )
    var audio1 = $(this).data('audio');
    var stereo = document.getElementById(audio1);
    stereo.pause();
    });
  });

HTML:

  <div class="container-flex w-container" style="">
        <?php $behind_the_image_images = get_field( 'behind_the_image' ); $count= 0;?>
        <?php if ( have_rows( 'behind_the_image' ) ) : ?>
    <?php while ( have_rows( 'behind_the_image' ) ) : the_row(); ?>
           <div data-w-id="50eadee3-1406-6c5c-563f-0957896a13d2" style="opacity:0" class="div-block-5">

   <a id="hover-<?=$count?>" href="#"  class="link-block-4 _1 link-<?=$count?> w-inline-block ejemplo" style="position:relative;" data-audio="audio-<?=$count?>" data-img="<?= get_sub_field('image'); ?>"></a>

            <div class="header_highlights _2"><?= get_sub_field( 'title_image' ) ?></div>
            <style>.link-<?=$count?> {background-image:url('<?= get_sub_field( 'image' ); ?>')!important;}</style>
                    <audio id="audio-<?=$count?>">
              <source src="<?= get_sub_field('audio_hover'); ?>" type="audio/mpeg"></source>
              <source src="nav.ogg" type="audio/ogg"></source>
            </audio>
          </div>
          <?php $count++; ?>
            <?php endwhile; ?>
        <?php endif; ?>
        </div>
      </div>
      <div style="" class="c1"></div>
      </div>

Answer 1

我最终通过 clip-path 和 jQuery 解决了这个问题。

JS:

jQuery(document).ready(function(){
  jQuery(".bimg").hover(function(){
    jQuery(".bimg").attr("style","clip-path: inset(0 0 0 0);");
    }, function(){
    jQuery(".bimg").attr("style","clip-path: inset(30% 60% 35% 12%);");
  });
});

CSS:

.bimg {
max-width:none;
position:absolute;
left:-60%;
padding:0px;
margin: 0%;
top:-650%;
}

HTML

<img src="<?= get_sub_field('image'); ?>"  width="1000px;" style="-webkit-clip-path: inset(30% 60% 35% 12%);clip-path: inset(30% 60% 35% 12%);" height="650px;" class="bimg">

图像显示不完美，我需要添加更多 CSS 以完全按照我的意愿显示图像，我需要使其跨浏览器兼容和响应，但基本思想就在这里。