css有办法实现两者图片重叠,特定区域显示下面图片吗?

2023-06-14 304 0

我现在有两张图片,我想两张图片叠加在一起,当鼠标移动时,下面的椭圆区域跟着移动,并且椭圆区域显示下面一张图片的内容。

两张图片:
第一张图片:
image.png
第二张图片:
image.png

我想显示这种效果:
鼠标移动时,椭圆区域显示第二张图片的内容。
image.png

有什么办法可以实现吗?

教程版:https://segmentfault.com/a/1190000040996523
拿来版:DEMO
(基于文章中mask修改,细节处需自行调整,如椭圆大小及渐变位置,或者再根据文章中所述其他技巧进行修改调整)

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?