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

Question

我需要设置这样的效果：

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

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

我试过好几种方法都没有成功。我没有解决方案。

编辑：

这是我所拥有的最好的解决方案，但还是离解决方案不近！

此脚本等待鼠标悬停在图像上以显示以图像为背景的 DIV。问题是，图像似乎正在展开，而不是 "uncovering"。

$(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 以完全按照我想要的方式显示图像，我需要使其跨浏览器兼容和响应，但基本思想在这里.

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

"Image masking" thumbnail + full size image. Tricky task

html

javascript

css

jquery

web-frontend