JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="imagebox" style="max-height:100px;">
    <img src="http://www.gettyimages.com/gi-resources/images/RoyaltyFree/113198687.jpg"/>
    <div class="showhide" >
        <a href="#" class="showlink">show</a>
        <a href="#" class="hidelink">hide</a>
    </div>
</div>

CSS

.imagebox
    {
        display:block;
        position:relative;
        overflow:hidden;
        width: 638px;
        margin: auto;
    }
    
    .hidelink
    {
        display:none;
    }
    
    .showhide
    {
        padding:5px;
        border-top:dashed 1px #333;
        border-bottom:dashed 1px #333;
        background:#F2f2f2 none repeat scroll 0 0;
        bottom:0;
        cursor:pointer;
        display:block;
        height:18px;
        left:0;
        line-height:18px;
        padding-left:5px;
        position:absolute;
        width:100%;
    }

JavaScript

$(document).ready(function()
    {
    // Image Area Mouseover and Mouseout
    $(".imagebox").mouseover(function()
    {
    $(".showhide").show();
    }).mouseout(function()
    { 
    $(".showhide").hide();
    });
    
    //Show link
    $(".showlink").click(function()
    {
    $(".imagebox").css('max-height','');
    $(".showlink").hide();
    $(".hidelink").show();
    });
    
    //Hide link 
    $(".hidelink").click(function()
    {
    $(".imagebox").css('max-height','100px');
    $(".hidelink").hide();
    $(".showlink").show();
    });
    
    });