JSFiddle - React, Tailwind, and code Playground

by Rahul Sharma

HTML

<ul id="shortcuts" class="sitewidth">
    <li><a href="#">
                <div class="shortcuticon box">
                    <img src="images/icon-learn.png" alt="" class="a">
                    <img src="images/icon-learn-hover.png" alt="" class="b">
                </div>
            </a>
    </li>
    <li><a href="#">
                <div class="shortcuticon box">
                    <img src="images/icon-learn.png" alt="" class="a">
                    <img src="images/icon-learn-hover.png" alt="" class="b">
                </div>
            </a>
    </li>
    <li><a href="#">
                <div class="shortcuticon box">
                    <img src="images/icon-learn.png" alt="" class="a">
                    <img src="images/icon-learn-hover.png" alt="" class="b">
                </div>
                <h2>Hello World!</h2>
            </a>
    </li>
</ul>

JavaScript

$(document).ready(function () {
      $("img.a").hover(

      function () {
          $(this).stop().animate({
              "opacity": "0"
          }, "slow");
      },

      function () {
          $(this).stop().animate({
              "opacity": "1"
          }, "slow");
      });
  });