JSFiddle - React, Tailwind, and code Playground

HTML

<DOCTYPE html>
    <html>
        <head>
        </head>
        <body>
            MouseOver on the box!
            <div id="box" class="transparent"></div>
            <div id="opacity"></div>
        </body>
    </html>

CSS

.transparent {
    opacity: 0.5;
}

#box {
    width: 200px;
    height: 200px;
    background-color: #f00;
}

JavaScript

$(function() {
    $("#box").hover(
    function() {
        $("#opacity").html($("#box").css("opacity"));
        $(this).fadeTo("slow", 1);
    });
});