JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="overlay"></div>
    <img src="https://si0.twimg.com/profile_images/2704840564/ace6835dc7c12861b013a8f1ac3b1041.png" />
</div>

CSS

.body
{
    background:purple;
}

.outer {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background:purple;
}
.outer:hover .overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    bottom:0px;
    border: 5px solid white;
    opacity: 0.75;
}

.outer img
{
    display:block;
}