JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<span>Take mouse on the image</span>
<br/><br/>
<img src="http://3.bp.blogspot.com/-4p6k8mM7V7c/T6jolM6I_4I/AAAAAAAACL4/lTZyaeJyObM/s400/Change_Image_Opacity_Using_jQuery.jpg" id="imgDemo" />

CSS

body
{
    padding: 10px;
   
}
span
{
    font-family : Arial;
    font-size : 14pt;
    color: green;
}

JavaScript

$(document).ready(function() {
    $("#imgDemo").css("opacity", 0.5);
    $("#imgDemo").hover(function() {
        $(this).animate({opacity: 1.0}, 500);
    }, function() {
        $(this).animate({opacity: 0.5}, 500);
    });
});