JSFiddle - React, Tailwind, and code Playground

by LinkinTED

HTML

<div class="canDo">
    <p>
        <img src="http://placehold.it/100x100" />
        <span>Description 1</span>
    </p>
    <p>
        <img src="http://placehold.it/100x100" />
        <span>Description 2</span>
    </p>
    <p>
        <img src="http://placehold.it/100x100" />
        <span>Description 3</span>
    </p>
    
    <p></p>
</div>

CSS

.canDo span {
	display: none;
}
.canDo p {
	display: inline;
}
.canDo img {
	border-bottom: 5px solid transparent;
}
.canDo img.fade {
	opacity: .5;
}
.canDo img:hover, .canDo img.active, .canDo img.fade:hover {
	border-bottom-color: #d74142;
	opacity: 1;
}
.canDo p:last-child {
	display: block;
}

JavaScript

$(document).ready( function() {
    $(".canDo img").mouseover( function() {
        $(".canDo img").removeClass('active').addClass('fade');
        $(this).addClass('active').removeClass('fade');
        $(".canDo p:last-child").fadeOut(function() {
            var msg = $('.canDo img.active').next('span').html()
            $(".canDo p:last-child").text(msg).fadeIn();
        });
    })
    .mouseout( function() {
        setTimeout(function(){
            $(".canDo img").removeClass('active fade')
            $(".canDo p:last-child").fadeOut();
        }, 3000);
    });
});