Any way to maintain image quality using hover zoom effect?

Site URL: http://www.justinryanward.com/detail-test

Hi all, 

I am pretty new to custom CSS but managed to patch together some code I found online to create basic hover zoom effect as seen on this test page.

http://www.justinryanward.com/detail-test

My issue is that I modified the code to zoom further than 1.1 (see below)

.sqs-block-image .design-layout-poster:hover img{transform:scale(1.9);transition: 2s}

When I do this, the image maintains good quality when zoomed in if I view the page on my Mac retina screen. HOWEVER if I view the page at smaller browser widths or on my lower res monitor the image looks fine before the hover zoom but gets pixelated and blurry when zoomed in. I figure this is because the site is loading the larger size image on my Retina display and a smaller res image on my other display so when I zoom in it looks blurry . (I confirmed this and on my retina it loads a 1500x1500 pixel image and on the smaller display it loads something like a 500x500 pixel image)

Is there any code or other way to force the site to load the 1500x1500 pixel image at all times? My goal is to clearly show some detail in the image and the blur defeats that purpose. 

I would even settle for code that allows me to swap images on hover to an entirely different image which I could use to similar effect by swapping in a closer crop of the piece.

I found the magic zoom plugin but I think that is a bit beyond my skill in that it looks like you have to enable developer mode and that is getting beyond my abilities or comfort.

Thanks for any input.

-Justin

Hi  JustinW,

I would like to propose a solution like so:

- You should create a naming convention on your uploaded image, eg: sword_zoomable.jpg , basket_zoomable.jpg... etc

- Then use this snippet and place it at Settings->Advanced->Code Injection->Footer

(function() {
  [].forEach.call(document.querySelectorAll("img[src*='zoomable']"), function(img) {
    var src = img.src;
    img.src = img.src.replace("750w", "1500w");  
  });
})();

thanks for the suggestion...I can't seem to make that work. When I go to settings-advanced-code injection..all I see is the ability to inject code in the header.

Scroll down you can see the footer textarea

Hi BaNgan

Thanks for this response. I'm trying to make all of the full-sized images zoomable. The Css seems pretty simple and works except that it makes the thumbnails zoom as well. Is there a way to target only the large images?

pls show me the large and thumbnail position