JSFiddle - React, Tailwind, and code Playground

by Jay Blanchard

HTML

<div class="col span_1_of_3 span_1_of_2" id="challenger"> <a href="projects/challenge.html">
        <div class="projectImage">
        <div class="hovtext">Challenger</div>
            <img src="http://placehold.it/30x30" data-hover="http://placehold.it/50x50"/>
        </div>
        <span class="title">Challenger</span>
        <span class="viewpr">View Project</span>
    </a>

</div>

CSS

.col {
    border: 1px red dashed;
}

JavaScript

$('.col').mouseenter(function () {
    // $(this).find('img').attr('src', $(this).data('hover')); second $(this) is still the column, not the image
    var hover = $(this).find('img').data('hover');
    var original = $(this).find('img').attr('src');
    $(this).find('img').attr('data-original', original);
    $(this).find('img').attr('src', hover);
}).mouseleave(function () {
    var original = $(this).find('img').data('original');
    $(this).find('img').attr('src', original);
});