我想在更多信息点击上显示图像上的文字

Question

我正在尝试在更多信息上显示图像上的文本，并在隐藏信息按钮上单击隐藏图像中的文本。

我正在用剃须刀开发网站。我试图在图像上显示文本更多信息点击并隐藏隐藏信息按钮上的图像文本。

<style>
    .portfolioImage {
        position: relative;
        overflow: hidden;
    }

    .portfolioImage .footerBar {
        position: absolute;
        width: 100%;
        height: 100%;
        position: absolute;          
        left: 0;
        margin-top: -200px;
        border-radius: 5px;       
    }

    .portfolioImage:hover .footerBar {
        margin-top: 0px;
        background-color: #ffb268;
        opacity: 0.8;
    }

    .footerBar {
        -webkit-transition: all 0.7s ease;
        transition: all 0.7s ease;
    }    
</style>

<div class="thumbnail" style="padding:0px;height:200px">
    <div class="portfolioImage" id="portfolioImage@(i)">
        <div class="footerBar" id="footerBar@(i)">
            <table class="table rate-info">
                <tr>
                    <td>First Passenger Fare</td>
                </tr>
            </table>
        </div>
        <div id="image_frame@(i)" class="image_frame">
            <img alt="100%x200" data-src="@(Url.Content("~/Images/van/"+vanImg+".png"))" src="@(Url.Content("~/Images/van/" + vanImg + ".png"))" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
        </div>
    </div>                              
    <div class="col-sm-2">
        <a id="btncollapseShow@(i)" name="btncollapse@(i)" onclick="ShowHideRates('@(i)','show')" style="color:#4285f4;font-size:small;cursor:pointer;" class="btnExpand" title="@Global.Translate("More info")">  &#43; </a>
        <a id="btncollapseHide@(i)" name="btncollapse@(i)" onclick="ShowHideRates('@(i)','hide')" style="color:#4285f4;font-size:small;cursor:pointer;display:none;" class="btnExpand" title="@Global.Translate("Hide info")">  &#8211; </a>
    </div>

function ShowHideRates(_cellindex, _showHide) {        
    var _image_frame = "#image_frame" + _cellindex;
    var btncollapseShow = "#btncollapseShow" + _cellindex;
    var btncollapseHide = "#btncollapseHide" + _cellindex;

    if (_showHide == "show") {
        $(btncollapseShow).css({ "display": "none" });
        $(btncollapseHide).css({ "display": "block" });
        // $(_image_frame).addClass("portfolioImage footerBar").css('margin-top','+200');         
    } else {
        $(btncollapseShow).css({ "display": "block" });
        $(btncollapseHide).css({ "display": "none" });
        // $(_image_frame).removeClass("footerBar");    
    }
}