title: Angular image zoom hover effect
body: <p>i am a fresher in angular.
  can you tell me which zoom hover effect will work in ecommerce product image?</p>
  
  <p>Also I have tried ngx-img-zoom npm but not working.</p>
  
  <pre><code>//test.component.html
    &lt;ngx-img-zoom
    [zoomImageSrc]="zoomImageSrc"
    [previewImageSrc]="previewImageSrc" 
    [imgStyle]="'width:515px; height:515px; bottom:0;  left:0;  right:0;  top:0;  margin:0 auto; border:1px solid #dcdcdc;'" 
    [resultStyle]="`width:824px; height:824px; background-repeat: no-repeat; z-index: 2; position:absolute;
                   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); top: 0;left: 100%;`"
    [lensStyle]="'width:155px; height:155px"
    [enableZoom] = "enableZoom"
    [containerStyle]=""
  &gt;&lt;/ngx-img-zoom&gt;
  </code></pre>
  
  <pre><code>//test.component.ts
    constructor(private ngxImgZoom: NgxImgZoomService) {
      this.ngxImgZoom.setZoomBreakPoints([{w: 100, h: 100}, {w: 150, h: 150}, {w: 200, h: 200}, {w: 250, h: 250}, {w: 300, h: 300}]);
  </code></pre>