JSFiddle - React, Tailwind, and code Playground

by Andy Novocin

HTML

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<ul class="games">
    <li class="game">
        <div class="thumb_wrapper">
            <img class="thumb" src="http://placekitten.com/150/300"/>
        </div> 
        <span class="txt">Text Here</span>
    </li>
    <li class="game"> 
        <div class="thumb_wrapper">
            <img class="thumb" src="http://placekitten.com/300/150"/>
        </div><span class="txt"> Text2 Here</span>
    </li>
    <li class="game">
        <div class="thumb_wrapper">
            <img class="thumb" src="http://placekitten.com/180/200"/>
        </div> <span class="txt">Text3 here</span>
    </li>
    <li class="game">
        <div class="thumb_wrapper">
            <img class="thumb" src="http://placekitten.com/150/250"/>
        </div> <span class="txt">Text 4 here</span>
    </li>

</ul>

<button type="button" class="showtxt">Show text</button>

<button type="button" class="hidetxt">Hide text</button>

CSS

.games {
    list-style-type: none;
    margin : 0;
    padding : 0;
}

.game {
    display : inline-block;
}

.game.line {
    display : list-item;
}

.txt {
    display : none;
    position: relative;
    top: 0;
    bottom: 0;
}

.thumb_wrapper {
    width : 10em;
    height : 10em;
    display : inline-block;
    position: relative;
    margin: 1em;
    border : .3em solid #bbb;
}

.thumb {
    width : auto;
    height: auto;
    max-width : 100%;
    max-height: 100%;
    display : block;
    padding: 0;
    margin: auto;
    position : absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

JavaScript

$(".txt").show();
$(".game").addClass("line");

$(".showtxt").click(function(){
   $(".txt").show();
   $(".game").addClass("line");
});

$(".hidetxt").click(function(){
   $(".txt").hide();
   $(".game").removeClass("line");
});