鼠标悬停时缩放图像

Question

当鼠标悬停在缩放图像上时，我正在尝试进行更多缩放。我的意思是当光标悬停在缩放的图像上时，图像的某些部分（如正方形、矩形、圆形等）应该缩放。 我有以下代码。请建议我如何在通过 onclick 缩放图像后实现更多缩放。

  <div id="overlay"></div>
  <div id="overlayContent">
 <img id="imgBig" src="" alt="" width="400" />
 </div><div class="imgSmall"><img src="xyz" 
 id="ProductPhotoImg">
         </div>
       </div>
 <script>
 $("#ProductPhotoImg").click(function(){
 $("#imgBig").attr("src",$(this).attr('src'));
 $("#overlay").show();
 $("#overlayContent").show();
  });

 $("#imgBig").click(function(){

$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC

  $("#overlay").hide(); 
  $( "#overlayContent" ).hide();
}
});
</script>
<style>
#overlay{
 position: fixed; 
 padding-right:10px;
 width: 100%; 
 height: 100%; 
 top: 0px; 
 left: 0px; 
 background-color: #000; 
 opacity: 0.7;
 filter: alpha(opacity = 70) !important;
 display: none;
 z-index: 100;

}
#overlayContent{
position: fixed;
-webkit-transform: scale(1.7); 
-moz-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
align-content:center;
width: 100%;
height: 100%;
display: none;
z-index: 100;
top: 100px;
padding-right: 24em;
padding-left: 14.3em;
top:16.2em;
}
#contentGallery{
margin: 0px auto;
}
#imgBig, .imgSmall, #ProductPhotoImg{
 cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
 }
</style>

此代码用于 onclick 缩放。但我想在鼠标悬停时进一步放大缩放图像（例如当鼠标悬停在图像上时，仅应缩放图像的部分悬停），请解决我的问题朋友。

提前致谢:)

Answer 1

你为什么不试试css hover？

喜欢：

.myClass{
    height: 100px;
    transition: 1s;
}
.myClass:hover{
    height: 200px;
}

在点击事件中，您调用一个 javascript 函数，例如：

function myFunc(object){
    object.className += "myClass";
}

Answer 2

最好的方法是使用 :hover 伪类。你要做的就是..

// Name class
.class {
  height: 20px;
  width: 20px;
}

.class:hover {
  height: 25px;
  width: 25px;
}

您可以将这些数字更改为您喜欢的任何数字，但您还应该看看其他可以在 css 中使用的很酷的伪类！ :) 希望这会有所帮助！

Answer 3

你可以做的更简单：

.normalpic {
width: 25px;
height: 25px;
}
.normalpic:hover {
width: 50px;
height: 50px;
}

这将使图像在悬停时放大 2 倍