JSFiddle - React, Tailwind, and code Playground

by Sergey Denisov

HTML

<img class="effectfront" style="width:50px; height=80%" src="https://sharetribe.s3.amazonaws.com/images/listing_images/images/100255/big/b4b8ry-cuaav_os.jpg?1427485186">

CSS

.effectfront {
    border: none;
    margin: 0 auto;
}

.effectfront:hover {
    padding: 2px;
    -webkit-animation: myscale 2s 1;
    animation: myscale 2s 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 1);
}

@-webkit-keyframes myscale {
    0%   { -webkit-transform: scale(1); }
    25%  { -webkit-transform: scale(12); }
    90%  { -webkit-transform: scale(12); }
    100% { -webkit-transform: scale(1); }
}

@keyframes myscale {
    0%   { transform: scale(1); }
    25%  { transform: scale(12); }
    90%  { transform: scale(12); }
    100% { transform: scale(1); }
}