/*Code to ZOOM objects on mouse over
NB the translation effect is unavailable for IE8
The  variations are as follows,
	TL,	zooms in with a fixed top-left corner, TC, zooms in centralised fixed at the TOP, TR, zooms in with a fixed top-right corner,
	CR,	zooms in centralised fixed at the RHS, BR, zooms in with a fixed bottom-right corner, BC, zooms in centralised fixed at the BOTTOM,
	BL,	zooms in with a fixed bottom-left corner, CL,	zooms in centralised fixed at the LHS & CC,	zooms in centralised, (no translation).
*/

.zoom_TL, .zoom_TC, .zoom_TR, .zoom_CR, .zoom_BR, .zoom_BC, .zoom_BL, .zoom_CL, .zoom_CC{
	/* This form will take the image size from the WIDTH, HEIGHT styles in the main program and so can be used with a variety of image sizes.
	The 'float:left' style below effectively lets the parent, (zoom_TL, etc.), inherit the size from the child image DIV.
	The problem with this is that it can't be used within any other structure that uses 'float' as it mucks up the floating!
	In such cases you have to declare images size below, (instead of 'auto'), and remove the 'float:left', AS IS THE CASE FOR THIS VERSION.
	*/
	width: 160px; 	/*Image width = W */
	height:160px; 	/*Image width = H */
	/*border: 1px solid black; */ /*For testing*/
	/*margin-left: 200px; For test positioning.*/
	background: white; 
	/*float:left;*/
	z-index: 10;
    -webkit-transition: all .3s ease-out; 
    -moz-transition: all .3s ease-out; 
    -o-transition: all .3s ease-out; 
    transition: all .3s ease-out; /*The specific form, 0.3 seconds timing*/
	}
	
/*Scale factor = S. Translate values, X & Y are given by X = W(S - 1)/2, Y = H(S - 1)/2 or (S - 1)/2 percent */
.zoom_TL:hover { 	/*Fixed point:	Top-Left corner*/
    -moz-transform:translate(150%, 150%) scale(4);
    -webkit-transform:translate(150%, 150%) scale(4) ;
    -o-transform:translate(150%, 150%)  scale(4);
    -ms-transform: translate(150%, 150%) scale(4);
	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=4, M12=-0, M21=0, M22=4);	/*No translate code for IE*/
	transform: translate(150%, 150%) scale(4);	/*The specific form*/
	}
	
.zoom_TC:hover { 	/*Fixed point:	Centre-Top*/
    -moz-transform:translate(0, 150%) scale(4);
    -webkit-transform:translate(0, 150%) scale(4);
    -o-transform:translate(0, 150%) scale(4);
    -ms-transform:translate(0, 150%) scale(4);
	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=4, M12=-0, M21=0, M22=4);	/*No translate code for IE*/
	transform:translate(0, 150%) scale(4);	/*The specific form*/
	}

.zoom_TR:hover { 	/*Fixed point:	Top-Right corner*/
    -moz-transform:translate(-150%, 150%) scale(4);
    -webkit-transform:translate(-150%, 150%) scale(4);
    -o-transform:translate(-150%, 150%) scale(4);
    -ms-transform:translate(-150%, 150%) scale(4);
	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=4, M12=-0, M21=0, M22=4);	/*No translate code for IE*/
	transform:translate(-150%, 150%) scale(4);	/*The specific form*/
	}
	
.zoom_CR:hover { 	/*Fixed point:	Centre-Right*/
    -moz-transform:translate(-150%, 0) scale(4);
    -webkit-transform:translate(-150%, 0) scale(4) ;
    -o-transform:translate(-150%, 0)  scale(4);
    -ms-transform: translate(-150%, 0) scale(4);
	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=4, M12=-0, M21=0, M22=4);	/*No translate code for IE*/
	transform: translate(-150%, 0) scale(4);	/*The specific form*/
	}
	
.zoom_BR:hover { 	/*Fixed point:	Bottom-Left corner*/
    -moz-transform:translate(-150%, -150%) scale(4);
    -webkit-transform:translate(-150%, -150%) scale(4);
    -o-transform:translate(-150%, -150%) scale(4);
    -ms-transform:translate(-150%, -150%) scale(4);
	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=4, M12=-0, M21=0, M22=4);	/*No translate code for IE*/
	transform:translate(-150%, -150%) scale(4);	/*The specific form*/
	}

.zoom_BC:hover { 	/*Fixed point:	Centre-Bottom*/
    -moz-transform:translate(0, -150%) scale(4);
    -webkit-transform:translate(0, -150%) scale(4);
    -o-transform:translate(0, -150%) scale(4);
    -ms-transform:translate(0, -150%) scale(4);
	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=4, M12=-0, M21=0, M22=4);	/*No translate code for IE*/
	transform:translate(0, -150%) scale(4);	/*The specific form*/
	}
	
.zoom_BL:hover { 	/*Fixed point:	Bottom-Left corner*/
    -moz-transform:translate(150%, -150%) scale(4);
    -webkit-transform:translate(150%, -150%) scale(4) ;
    -o-transform:translate(150%, -150%)  scale(4);
    -ms-transform: translate(150%, -150%) scale(4);
	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=4, M12=-0, M21=0, M22=4);	/*No translate code for IE*/
	transform: translate(150%, -150%) scale(4);	/*The specific form*/
	}
	
.zoom_CL:hover { 	/*Fixed point:	Centre-Left*/
    -moz-transform:translate(150%,0) scale(4);
    -webkit-transform:translate(150%,0) scale(4);
    -o-transform:translate(150%,0) scale(4);
    -ms-transform:translate(150%,0) scale(4);
	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=4, M12=-0, M21=0, M22=4);	/*No translate code for IE*/
	transform:translate(150%,0) scale(4);	/*The specific form*/
	}

.zoom_CC:hover { 	/*Fixed point:	Centre*/
    -moz-transform: scale(4);
    -webkit-transform: scale(4);
    -o-transform: scale(4);
    -ms-transform: scale(4);
	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=4, M12=-0, M21=0, M22=4);	/*No translate code for IE*/
	transform: scale(4);	/*The specific form*/
	}
	
.image { 
	margin: 0; 
	border: 0 }

.zone_zoom {
    width: 200px;  
	border: 1px solid black;  
	margin-left: 200px; 
	background: cyan; 
	z-index: 10; 
	overflow: hidden;
}