tengo mi galería funcionando correctamente, solo que no encuentro la manera de visualizar texto al momento de abrir la imagen con popup, les dejo el código simplificado y les muestro ejemplos de como queda, a ver si ustedes saben como puedo agregar texto.

**HTML**

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
    
     <div class="container">
             <div class="row">
                
             </div>
             <div class="portfolio-menu mt-2 mb-4">
                <ul>
                   <li class="btn btn-outline-dark" style="margin: 2px;" data-filter="*">Todos</li>
                   <li class="btn btn-outline-dark" style="margin: 2px;" data-filter=".bolsa">Bolsa</li>
                   </ul>
             </div>
             <div class="portfolio-item row">
              <div class="item bolsa col-lg-3 col-md-4 col-6 col-sm">
                <a href="/img/productos/Bolsa/bolsa_negra_para_basura.png" class="fancylight popup-btn" data-fancybox-group="light">
                <img class="img-fluid" src="/img/productos/Bolsa/bolsa_negra_para_basura.png" alt="Bolsa negra para basura">
                </a>
                <p class="text-center">Bolsa negra para basura</p>
             </div>

**CSS**

     .portfolio-menu{
        text-align:center;
    
      }
      .portfolio-menu ul li{
        display:inline-block;
        margin:0;
        list-style: none;
        padding:10px 15px;
        cursor: pointer;
        -webkit-transition:all 05s ease;
        -moz-transition:all 05s ease;
        -ms-transition:all 05s ease;
        -o-transition:all 05s ease;
        transition:all .5s ease;
      }

      .portfolio-item .item{
        float:left;
        margin-bottom:10px;
      }


**JS**

     $('.portfolio-menu ul li').click(function(){
                $('.portfolio-menu ul li').removeClass('active');
                $(this).addClass('active');
                
                var selector = $(this).attr('data-filter');
                $('.portfolio-item').isotope({
                    filter:selector
                });
                return  false;
            });
            $(document).ready(function() {
            var popup_btn = $('.popup-btn');
            popup_btn.magnificPopup({
            type : 'image',
            gallery : {
                enabled : true
            }
            });
            });

El Resultado es correcto, solo que no he encontrado la forma de insertar texto al abrir la imagen, solo fuera de.

[![texto fuera de la imagen][1]][1]


[![introducir la descripción de la imagen aquí][2]][2]


  [1]: https://i.sstatic.net/aDny0.jpg
  [2]: https://i.sstatic.net/SBlwb.jpg


Yo deseo mostrar texto en la parte que remarque en rojo o ya sea aun lado, la idea es meter texto en cada imagen...

Muchas gracias de antemano.