CSS transition on transparent images

Two things you have to do.

Crop you images to fit only the space need by them, not the whole container size so they don't overlap each other.
Remove the :hover from the div and add a :hover behaviour to each image by using the img selector.

Here's the example:

div {    margin: 50px; /* Just for demo purposes */}img {    -webkit-transition: all 1s ease; /* Safari and Chrome */    -moz-transition: all 1s ease; /* Firefox */    -ms-transition: all 1s ease; /* IE 9 */    -o-transition: all 1s ease; /* Opera */    transition: all 1s ease;}img:hover {    -webkit-transform:scale(1.25); /* Safari and Chrome */    -moz-transform:scale(1.25); /* Firefox */    -ms-transform:scale(1.25); /* IE 9 */    -o-transform:scale(1.25); /* Opera */     transform:scale(1.25);}

<div style="position: relative; left: 0; top: 0;">    <img class="one" src="http://i.stack.imgur.com/bFfbC.png" style="position: absolute; top: 0; left: 0;" />    <img class="two" src="http://i.imgur.com/iEwbExs.png" style="position: absolute; top: 76px; left: 72px;"/>    <img class="three" src="http://i.imgur.com/hdwFlUv.png" style="position: absolute; top: 102px; left: 100px;"/></div>

Expand snippet