zoom image when mouse hover

Question

am trying to make more zoom when mouse hover on zoomed image. i mean when cusror hover on zoomed image, some part like square, rectangle, circle etc part of image should zoom. i have the following code. please suggest me how can i achieve more zoom after zooming the image by 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>

This code is for onclick zoom.but i want further zoom on mouse hover for zoomed image(like when mouseover on image only hoverd part of image should be zoomed), please sort out my issue friends.

Thanks in advance :)

Answer 1

The best way to do that is with the :hover pseudo class. all you do is..

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

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

You can change those numbers to whatever you'd like but you should also look at other cool pseudo classes you can use in css! :) Hope this helps!

Answer 2

why don't you try css hover?

like:

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

at the click event you call a javascript function like:

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

Answer 3

you can do it easier :

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

This will make the image 2x larger on hover