弹出图像html

Question

我正在开发一个镀铬扩展,在任何悬停在图像上时,它应该在图像上弹出一个框,图像​​应该缩放到原始图像的1.5倍.所以我开始研究示例,并找到了类似的示例.

.zoomin img {
  height: 200px;
  width: 200px;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
}
.zoomin img:hover {
  width: 300px;
  height: 300px;
}

<div class="zoomin">
  <img src="http://www.corelangs.com/css/box/img/zimage.png" title="All you need to know about CSS Transitions " />
</div>

但相反,我需要创建一个框,而不会在悬停时缩放图像.所以在我的练习中使用这个仅使用CSS,将鼠标悬停在<a>上,我开发了这个.

main.js

div {
    display: none;
}

img:hover + div {
    display: block;
 height : 200px;
    width : 300px;
}

但问题是应根据我们悬停的图像动态调整图像的大小.

当我们将鼠标悬停在图像上时,是否有办法使其工作,它应该自动生成一个div,该div应该保持图像尺寸的1.5倍.任何建议.请帮助

我在下面列出了截图供参考.

Answer 1

  img:hover  div {
        display: block;
var img = document.getElementById('imageid'); 
// get the image dimensions using this id
var width1 = img.clientWidth;
var height1 = img.clientHeight;
        height : width * 1.5;
        width : height * 1.5;
    }