JSFiddle - React, Tailwind, and code Playground
by Imri Paloja
HTML
<a href="http://i.imgur.com/q5XkBBl.png" title="Mega Sync Client">
<img src="http://i.imgur.com/q5XkBBl.png" alt="Mega Sync CLient">
</a>
CSS
img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-o-transition: all 1s ease; /* IE 9 */
-ms-transition: all 1s ease; /* Opera */
transition: all 1s ease;
max-width: 100%;
width: 175px;
}
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);
}
/* just apply some height and width to the wrapper. */
img {
width:175px;
height:auto;
overflow: auto;
}