JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<input id="football" type="checkbox" value="1" />

<div class="unchecked">
    Unchecked: 
    
    displays one DIV 
    <div id="FootballChoice">
        (FootballChoice) containing a 
        <label for="football">label image for the checkbox that changes with mouseover</label>
    </div>
</div>

<div class="checked">
    Checked:

    hides the DIV (FootballChoice)
    shows a hidden DIV 
    <div id="FootballChecked">
        (FootballChecked) that contains an
        <label for="football">alternate label image</label>
    </div>
    shows another hidden DIV .
    <div id="FootballTeams">
        (FootballTeams)
    </div>
    When unchecked again, this needs to return to it's original state.

</div>

CSS

#football {opacity:0.2;}
.checked {display:none;}
#football:checked ~ .unchecked {display:none;}
#football:checked ~ .checked {display:block;}
label {
    display:inline-block;
    border:1px solid blue;
    padding:20px;
    background:url(http://lorempixel.com/100/100/sports)
}
label:hover {
    border-color:red;
    background:url(http://lorempixel.com/100/100/cats)
}