JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<div id="search-result-banner">
    <a href="/capacetes/Aberto?O=OrderByReleaseDateDESC&PS=16&map=c,spec_fct_29" title="Veja todos os capacetes abertos">
        <div class="search-result open">
            <div class="caption">
                Capacetes abertos
            </div>
        </div>
    </a>
    
    <a href="/capacetes/Fechado?PS=16&map=c,spec_fct_29&O=OrderByReleaseDateDESC" title="Veja todos modelos de capacetes fechados">
        <div class="search-result closed">
            <div class="caption">
                Capacetes fechados
            </div>
        </div>
    </a>
    <a href="/capacetes/Articulado?PS=16&map=c,spec_fct_29&O=OrderByReleaseDateDESC" title="Veja todos os modelos de capacetes articulados (Robocop)">
        <div class="search-result articulated">
            <div class="caption">
                Capacetes articulados
            </div>
        </div>
    </a>
    <a href="/capacetes/viseira-solar?PS=16&O=OrderByReleaseDateDESC" title="Veja todos modelos de capacetes com viseira solar interna">
        <div class="search-result sunvisor">
            <div class="caption">
                Capacetes com viseira solar
            </div>
        </div>
    </a>
</div>

CSS

#search-result-banner{
    height:176px;
    width:100%;
    float:right;
}

#search-result-banner .search-result{
    height:176px;
    width:198px; 
    float:left;
    text-align:center;
    position:relative;
    overflow:hidden;
}

#search-result-banner .open:hover .caption,
#search-result-banner .closed:hover .caption,
#search-result-banner .articulated:hover .caption,
#search-result-banner .sunvisor:hover .caption
{
    bottom:0px;
}

#search-result-banner .caption{
    padding:10px 5px;
    box-sizing: padding-box;
    height:auto;
    width:100%;
    float:left;
    font-size:16px;
    text-align:center;
    color:#FFF;
    position:absolute;
    bottom:-40px;
    background: rgba(0, 0, 0, 0.8);
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}

#search-result-banner .open{
    background:url(http://www.rs1.com.br/arquivos/search-result-open-helmet.jpg) no-repeat;
}

#search-result-banner .closed{
    background:url(http://www.rs1.com.br/arquivos/search-result-closed-helmet.jpg) no-repeat; 
}

#search-result-banner .articulated{
    background:url(http://www.rs1.com.br/arquivos/search-result-articulated-helmet.jpg) no-repeat; 
}

#search-result-banner .sunvisor{
    background:url(http://www.rs1.com.br/arquivos/search-result-sun-visor-helmet.jpg) no-repeat; 
    border-right:1px solid #dddddd;
    box-sizing:border-box;
}