JSFiddle - React, Tailwind, and code Playground

HTML

<body>
     <div class="col-md-8 section span7 text-center">
         <div class="thumbnail">
            <img src="http://davidnaylor.org/temp/thunderbird-logo-200x200.png" alt="Site Pessoal">
               <div class="caption">
                  <p><strong>Site</strong></p>
                     <p>
                        <a href="#" class="btn btn-info gray gly_medium" id="site-imagens" title="Veja imagens">
                             <span class="glyphicon glyphicon-search"></span>
                        </a>
                        <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
                             <span class="glyphicon glyphicon-link"></span>
                        </a>
                     </p>
                   </div>
                    </div>
                    <div class="thumbnail">
                        <img src="https://upload.wikimedia.org/wikipedia/en/7/71/Quebec_citadelles_200x200.png" alt="Video Site">
                        <div class="caption">
                            <p><strong>Video Content Site</strong></p>
                            <p>
                                <a href="#" class="btn btn-info gray gly_medium" id="video-imagens" title="Veja Imagens">
                                    <span class="glyphicon glyphicon-search"></span>
                                </a>
                                <a href="#" class="btn btn-info gray gly_medium" title="Acesse o site">
                                    <span class="glyphicon glyphicon-link"></span>
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="thumbnail">
                        <img src="http://horoscopo.ego.globo.com/img/horoscopo.ego.globo.com/icones/signos/gemeos-g.png" alt="Video Site">
                        <div class="caption">
                            <p><strong>Video Site</strong></p>
                    ...

CSS

.thumbnail{
    display:inline-block
}

.caption{
    display: none; /* trocado de opacity */
    transition:opacity .5s;
    position:absolute;
    background-color:#fff;
    width:308px;
    margin-left:-5px
}

.thumbnail:hover .caption{ 
    display: block; /* trocado de opacity */
    z-index:1
}