JSFiddle - React, Tailwind, and code Playground

by AntonTrollback

HTML

<ul>
    <li contenteditable><img src=//placehold.it/150x200></li>
    <li contenteditable><img src=//placehold.it/150x200></li>
    <li contenteditable><img src=//placehold.it/150x200></li>
</ul>

CSS

ul {
    padding: 40px 0;
    text-align: center;
}

li {
    width: 75px; height: 100px;
    margin: 12px;
    display: inline-block;
    position: relative;
    top: 50px; /* height/2 */
    opacity: .7;
    cursor: default;
    -webkit-transition: .3s ease;
       -moz-transition: .3s ease;
        -ms-transition: .3s ease;
         -o-transition: .3s ease;
            transition: .3s ease;
    -webkit-transition-property: width, height, top, opacity;
       -moz-transition-property: width, height, top, opacity;
        -ms-transition-property: width, height, top, opacity;
         -o-transition-property: width, height, top, opacity;
            transition-property: width, height, top, opacity;
}

li:focus {
    width: 150px; height: 200px;
    border: 0; outline: 0;
    opacity: 1;
    top: 0px;
}

li img {
    width: 100%; height: auto;
    position: absolute;
    top: 0; left: 0;
}