How do I focus an image from the bottom left?

I got everything pretty much figured out but I can't seem to override the margin-top. I need the 4th child to focus from the bottom not from the middle.

.gallerya a:focus img{
width: 350%; 
height: 350%;
margin-left:-120%;
margin-top:-50%;
position: absolute;
opacity: 1; 
z-index: 1; 
-moz-box-shadow: 0 0 5px 1px #4D4D4D;
-webkit-box-shadow: 0 0 5px 1px #4D4D4D;
box-shadow: 0 0 5px 1px #4D4D4D; 
-webkit-transition-duration: 1s; 
-webkit-transition-delay: 0.1s; 
-moz-transition-property: width, height;
-moz-transition-duration: 1s;
-moz-transition-delay: 0.1s;
-o-transition-property:width, height;
-o-transition-duration: 1s;
-o-transition-delay: 0.1s;
cursor: default;
}

.gallerya a:first-child img{
margin-left: 0;
margin-top: 0;
}

.gallerya a:nth-child(3) img{
right:0;
margin-top: 0;
}

.gallerya a:nth-child(4) img{
margin-left:0;
}

Codepen example