如何在两个图像上创建缩放/放大效果

问题描述

我需要您的专业知识，我有一个包含两个图像的div（一个在前面，一个在后面。Front= Design，Back是画布），我要做的是实现缩放功能。当您将鼠标悬停时，将显示一个放大镜，它将放大包括这两个图像在内的图像部分。请查看下面的说明。

尝试使用此插件和一些jquery缩放插件，但它们一次只能缩放一个图像。 https://github.com/marcaube/bootstrap-magnify

您能帮我这个问题还是推荐一个js插件？

HTML

<div class="active-image image">
  <img id="front-img" class="img-responsive center-block" src="1.jpg">
  <img id="back-img" class="img-responsive center-block"  src="1-back.jpg">
</div>

CSS

.fb-master {
    height: 549px !important;
    position: relative;
    display: inline-block;
}

#front-img {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  top: 0px;
  z-index: 2;
  position: absolute;
  left: 0;
  right: 0;
}

#back-img {
   possible: absolute:
   z-index: 1;
   min-width: 400px !important;
   left: 0;
   top: 0 !important;
}

样本图像-正面是设计，背面是画布，当您将鼠标悬停在其上时，它们都会被放大 ：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）