JSFiddle - React, Tailwind, and code Playground

HTML

<div class="calendar">
        <img src="http://lorempixel.com/100/100/" alt="lots of content" />
        <ul>
            <li>
                lots of content
            </li>
            <li>
                lots of content
            </li>
        </ul>
    </div>
    <div class="calendar">
        <img src="http://lorempixel.com/100/100/" alt="lots of content" />
        <ul>
            <li>
                lots of content
            </li>
            <li>
                lots of content
            </li>
        </ul>
    </div>
    <div class="calendar">
        <img src="http://lorempixel.com/100/100/" alt="lots of content" />
        <ul>
            <li>
                lots of content
            </li>
            <li>
                lots of content
            </li>
        </ul>
    </div>

CSS

.calendar {width: 100px; height: 100px; overflow: hidden; margin: 5px; border: 1px solid #ccc; border-radius: 5px; padding: 4px;}
.calendar:hover ul, .calendar img {display: block;}
.calendar:hover img, .calendar ul {display: none; background: red;}
ul, ul li {display: block; padding: 0; margin: 0 5px; list-style: none; border-bottom: 1px solid #ccc;}
ul {border: 0;}