html - css transform:scale(2,2) pops up behind other images -

i'm using joomla 3.3 and, on mouseover want enlarge image.

the html image is:

<img class="enlarge" style="float: right; margin: 10px; border: 5px solid black;" title="chapter 1: physical differences" src="images/chapters/chapter-1-physical-differences.jpg" alt="chapter 1: physical differences" width="311" height="390" /> 

to affect enlargement on mouseover i'm using following css:

.enlarge:hover {     transform:scale(2,2);     transform-origin:0 0; } 

it works great but, on right side of page there smaller image , large image pops under smaller image on screen... it's need set z-index tried , didn't change results @ all.

before:

mouseover:

z-index doesn't affect display: static elements. believe issue outlining floated image has been added dom before smaller image, such appear behind other image.

so suspect have 1 of following:

1. an order of operations adds smaller image before larger image.
2. hide smaller image when larger image moused over.
3. set smaller image display: absolute, , set lower z-index.
4. hacky stuff remove smaller image after dom load , re-add change it's default z-order.
5. make larger image not float, , allow it's change in size push smaller image next line.

that's can come off of top of head. :-)