JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div class="globe">
    
</div>

<img src="https://karczmarczuk.users.greyc.fr/TEACH/InfoGeo/Images/Globe.png" />

CSS

* {
    margin: 0px;
    padding: 0px;
    color: #484848;
    -webkit-text-stroke: 0.35px;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: 300;
}
html, body {
    min-height: 100vh;
    width: 100%;
}

.globe {
    width: 300px;
    height: 300px;
    position: absolute;
    z-index: 100;
    border-radius: 150px;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(33%,rgba(0,0,0,0.95)), color-stop(50%,rgba(0,0,0,0.95)), color-stop(66%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0)));
    -webkit-transition:background-position 3s ease;
    -moz-transition:background-position 3s ease;
    -o-transition:background-position 3s ease;
    transition:background-position 3s ease;
    background-position: 20px;
    background-repeat: no-repeat;
    background-size: 200% auto;
}

.globe:hover {
    background-position: -400px;
}

img {
    width: 300px;
    height: 300px;
}