Having some trouble with a code for image zoom in/out. When I adjust the position of the image by applying margin left to either the image or the image container (#view), it affects the zoom functionality - causing the image to move to the left during zooming. You can see the issue in the fiddle link below. Removing the margin left resolves the problem, but I want to be able to position the image where I want without impacting the zoom feature. Please let me know if my explanation is unclear.
/*style.css*/
#view {
border: 1px solid #333333 ;
overflow: hidden ;
position: relative ;
width: 400px ;
/*giving margin left to move image to the center*/
margin-left: 400px;
}
.imageZoomInOut {
display: block ;
left: 0px ;
top: 0px ;
}
#zoom {
background-image: url( "./white_fade.png" ) ;
border: 1px solid #000000 ;
cursor: pointer ;
display: none ;
height: 200px ;
position: absolute ;
width: 200px ;
z-index: 100 ;
}