JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<a href="#">
    <img class="one" src="http://lorempixel.com/200/200/sports/1" />
    <img class="two" src="http://lorempixel.com/200/200/sports/2" />
</a>

SCSS

a {
    background: #4679BD;
    border-radius: 100%;
    display: inline-block;
    overflow: hidden;
    padding: 10px;
    width: 200px;
    height: 200px;
    position: relative;
    
    img {
        position: absolute;
        border-radius: 100%;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        display: block;
        transition: all 0.3s ease-out 0s;
    }
    img.one {
       transform: rotate3d(0, 1, 0, 0deg);
    }
    &:hover img.one {
        transform: rotate3d(0, 1, 0, 180deg);
    }
    img.two {
       transform: rotate3d(0, 1, 0, 180deg);
    }
    &:hover img.two {
        transform: rotate3d(0, 1, 0, 0deg);
    }
}