JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://farm7.staticflickr.com/6166/6263291085_849cbce9e3_z.jpg" />

<img class="no-scale" src="http://farm7.staticflickr.com/6166/6263291085_849cbce9e3_z.jpg" />

CSS

img {
    transform-origin: 0 0;
    transform: scale(0.4);
    transition-duration: 1s;
    opacity: 0.5;
}
img.no-scale {
transform: none;
}


img:hover {
    opacity: 1;
}

JavaScript

/* 
    Hover the image to see the bug
    (Firefox 20 mac)
    
    Shortly after transition ended, the scaled
    image is smoothed (causing a visual "bump")
*/