JSFiddle - React, Tailwind, and code Playground

by AntonTrollback

HTML

<div>
    <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>
</div>

CSS

html, body, div {
    text-align: center;
    height: 100%;
}

div:before {
    content: '';
    display: inline-block;
    height: 100%; 
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}
 
ul {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}

li {
    width: 75px; height: 100px;
    margin: 0 12px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    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, opacity;
       -moz-transition-property: width, height, opacity;
        -ms-transition-property: width, height, opacity;
         -o-transition-property: width, height, opacity;
            transition-property: width, height, opacity;
}

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

li img {
    width: 100%; height: auto;
    display: block;
    position: absolute;
}