JSFiddle - React, Tailwind, and code Playground

by infous

HTML

<div></div>

CSS

div {
    overflow: hidden;
    position: relative;
    width: 33%;
}

div:before {
    content: '';
    display: block;
    /* To make div's height equal to width. */
    padding-top: 100%;
}

div:after {
    background: url(http://lorempixel.com/400/400/) no-repeat center center;
    background-size: cover;
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(1);
    transition: transform .5s;
    /*transition: top .2s ease-in-out, right .2s ease-in-out, bottom .2s ease-in-out, left .2s ease-in-out;*/
}

div:hover:after {
    transform: scale(2);
}