JSFiddle - React, Tailwind, and code Playground

by Brewal Renault

HTML

<div id="item-container">
    <div class="item-size">
        Item-size 1
        <figure class="ribbonnew">
            <img class="ribbonnewimg" alt="" src="//placehold.it/64x64" />
        </figure>
    </div>
    <div class="item-size">
        Item-size 2
        <figure class="ribbonnew">
            <img class="ribbonnewimg" alt="" src="//placehold.it/64x64" />
        </figure>
    </div>
    <div class="item-size">
        Item-size 3
        <figure class="ribbonnew">
            <img class="ribbonnewimg" alt="" src="//placehold.it/64x64" />
        </figure>
    </div>
</div>

CSS

#item-container {
    background: red;
    color: white;
    line-height: 30px;
    text-align: center;
    padding: 20px;
}
#item-container div.item-size {
    background: green;
    height: 200px;
    margin-bottom: 20px;
}

JavaScript

$('.ribbonnew').toggle();
$('#item-container').on('mouseenter mouseleave', '.item-size', function(){
    $(this).find('.ribbonnew').fadeToggle(400);
});