"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来完全按照我的意愿显示图像，我需要使其跨浏览器兼容并响应，但基本想法就在这里。