JSFiddle - React, Tailwind, and code Playground

by HectorWasHere

HTML

<ul>
    <li>
        <div class='parentExample'>
            <img class='imageExample' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKg40S2_gp52YehcMQpMbxQMJpIbcS1Mq31-gVGyaxLLaa9jtxzg' />
            <div class='textExample'>Some text here</div>
        </div>
    </li>
    <li>
        <div class='parentExample'>
            <img class='imageExample' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKg40S2_gp52YehcMQpMbxQMJpIbcS1Mq31-gVGyaxLLaa9jtxzg' />
            <div class='textExample'>Some text here</div>
        </div>
    </li>
    <li>
        <div class='parentExample'>
            <img class='imageExample' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKg40S2_gp52YehcMQpMbxQMJpIbcS1Mq31-gVGyaxLLaa9jtxzg' />
            <div class='textExample'>Some text here</div>
        </div>
    </li>
    <li>
        <div class='parentExample'>
            <img class='imageExample' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKg40S2_gp52YehcMQpMbxQMJpIbcS1Mq31-gVGyaxLLaa9jtxzg' />
            <div class='textExample'>Some text here</div>
        </div>
    </li>
    <li>
        <div class='parentExample'>
            <img class='imageExample' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKg40S2_gp52YehcMQpMbxQMJpIbcS1Mq31-gVGyaxLLaa9jtxzg' />
            <div class='textExample'>Some text here</div>
        </div>
    </li>
</ul>

CSS

ul {
    list-style-type: none;
}

.parentExample {
    height: 100px;
    width: 100px;
}

.parentExample .imageExample {
    background-color: #0f0;
    width: 100%;
    height: 100%;
}
.parentExample .textExample {
    background-color: #f00;
    width: 100%;
    height: 100%;
    display: none;
}

.parentExample:hover .imageExample {
    display: none;
}
.parentExample:hover .textExample {
    display: block;
}