Edit in JSFiddle

<h4>Transform origin Top Left</h4>
<img class="zoomEffect" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="HTML5" />
<br/>
<h4>Transform origin Bottom Right</h4>
<img class="zoomEffect zoomEffect_br " src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="HTML5" />
<br/>
<h4>Transform origin 25 25</h4>
<img class="zoomEffect zoomEffect_25_25" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="HTML5" />

img.zoomEffect {
    transition: all 0.5s ease-in-out 0s;
    opacity: 0.7;
    transform-origin: top left;
}

img.zoomEffect:hover {
    transform: rotate(25deg);
    opacity: 1;
}

img.zoomEffect_br {
    transform-origin: bottom right;
}
img.zoomEffect_25_25 {
    transform-origin: 25px 25px;
}