css transform scale keep onscreen - html

Question

I have a series of images on-screen in bootstrap 3 panels (3 per row for large screens).
When you click on an image I have it set up so that it applies a CSS class which does a 'scale(2)' on the image, this all works fine, but I want those images to be visible and scale themselves on screen.
Images in column 1 end up slightly off-screen to the left, Images in column 3 end up slightly off-screen to the right, Images in column 2 are for the most part fine.
Ideally I would like them to scale into the centre of the viewport itself, or at least just not render off-screen at all.
CSS:
.zoom {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.zoom-click {
-ms-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
position:relative;
z-index:100;
border: 2px solid DarkRed;
}
Upon clicking on the image it adds/removes the 'zoom-click' class.
I have tried using 'translate' along with the 'scale' however it is relative to the image itself, have also tried using 'transform-origin'.
**Update: ** Have created a jsfiddle showing how it is at present (minus the knockoutjs code which actually creates each of the 'main-image-panel' panels.
https://jsfiddle.net/tczh1sxq/2/

Answer 1

Figured it out. I always seem to have difficulty at times with the more complex CSS.
Anyway, fixed it by doing:
#images > div .zoom-click { transform-origin: top; }
#images > div:nth-child(3n+0) .zoom-click { transform-origin: top right; }
#images > div:nth-child(3n+1) .zoom-click { transform-origin: top left; }
Be nice if I could get it to actually go into the centre of the viewport, but this will suffice, looks much neater now that it isn't off-screen on the edges.

Answer 2

this might help,
.zoom-click
{
position: absolute;
height: 50%;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
You can use any height/ width you want. If the image is contained within any positioned element, you can use position: fixed and it will still work

Answer 3

Just an idea tried to resolve your issue. I used different tranform-origin based on child element index value as like nth-child,
$('.child').click(function(){
var index = $(this).index()+1;
if((index%3)==1){
$(this).find('img').css({
'transform': 'scale(2)',
'transform-origin': 'top left'
});
}
else if((index%3)==2){
$(this).find('img').css({
'transform': 'scale(2)',
'transform-origin': 'top'
});
}
else if((index%3)==0){
$(this).find('img').css({
'transform': 'scale(2)',
'transform-origin': 'top right'
});
}
});
Find this fiddler for reference.