JSFiddle - React, Tailwind, and code Playground

HTML

<a href="https://youtu.be/rVgB3CfgsYI" target="blank">CLIQUEZ ICI</a>

CSS

body {
    background-color:#333;
    padding:20px 0;
}

.view {
    width:300px;
    height:200px;
    margin:0 auto;
    border:5px solid #fff;
    overflow:hidden;
    position:relative;
    text-align:center;
    box-shadow:0 0 5px #aaa;
    cursor:default;
}

.view .mask {
    width:300px;
    height:200px;
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
}

.view img {
    display:block;
    position:relative;
}

.main {
    position:relative;
    width:600px;
    margin:0 auto;
    padding:5px 10px;
}

.effect img {
    opacity:0.2;
    -moz-transition:all 0.3s ease-in;
}

.effect .mask {
    cursor:pointer;
    opacity:1;
    visibility:visible;
    border:100px solid rgba(0,0,0,0.7);
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -moz-transition:all 0.4s cubic-bezier(0.940,0.850,0.100,0.620);
}

.effect:hover .mask {
    border:0 double rgba(0,0,0,0.7);
    opacity:0;
    visibility:hidden;
}

.effect:hover img {
    opacity:1;
}