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")
*/