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

我最终通过剪切路径和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以完全按照需要显示图像，并且需要使其跨浏览器兼容和响应，但是基本思想就在这里。

“图像遮罩”缩略图+全尺寸图像。棘手的任务

1 个答案: