JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

<div class="tile">
    <a href="#" class="plus"><img src="http://f.cl.ly/items/1o180O1X1K1b1E0I2T1w/plus_white_blue.png" data-hover="http://f.cl.ly/items/3p2y2q351q0S1F2Z4232/plus_white_black.png" alt=""></a>
        <div class="inner">
            foobar!
        </div>
    </div>
    
    <div class="tile">
    <a href="#" class="plus"><img src="http://f.cl.ly/items/1o180O1X1K1b1E0I2T1w/plus_white_blue.png" data-hover="http://f.cl.ly/items/3p2y2q351q0S1F2Z4232/plus_white_black.png" alt=""></a>
        <div class="inner">
            foobar!
        </div>
    </div>

CSS

.tile {
            width: 200px;
            height: 300px;
            background-color: pink;
            margin: 20px;
            position: relative;
        }
        .plus {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }


        
        .inner {
            width: 200px;
            height: 50px;
            background-color: goldenrod;
        }
        .hover {
            background-color: lightblue;
        }

JavaScript

$(function() {
            $('img[data-hover]').hover(function() {
                $(this)
                    .attr('tmp', $(this).attr('src'))
                    .attr('src', $(this).attr('data-hover'))
                    .attr('data-hover', $(this).attr('tmp'))
                    .removeAttr('tmp');
            }).each(function() {
                $('<img>').attr('src', $(this).attr('data-hover'));
            });;

            $('.tile').hover(
                function () {
                    $(this).addClass("hover");
                    $(this).children('.inner').addClass("hover");
                  },
                  function () {
                    $(this).removeClass("hover");
                    $(this).children('.inner').removeClass("hover");
                  }
            ) 

            $('.plus').hover(
                function () {
                    $(this).addClass("plus-hover");
                    $(this).parent().removeClass("hover");
                    $(this).parent().children('.inner').removeClass("hover");
                  },
                  function () {
                    $(this).removeClass("plus-hover");
                    $(this).parent().addClass("hover");
                    $(this).parent().children('.inner').addClass("hover");          
                  }
            )

        });