How to change the css of an opened popup

[carolinelilyyu]

i want to change the brightness of an item. Tried following this but this format didn't help me change the css

$(".event").magnificPopup({

            callbacks: {
                open: function(){

                    $(".hidden-div").css("display", "block");
                },
                close: function(){

                    $(".hidden-div").css("display", "none");
                }
            },

            items: {

                src: ".hidden-div",
                type: "inline"
            },
            closeBtnInside: true
        });

Here is my code:

$('.project-area .grid .test-popup-link').magnificPopup({
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    gallery: { enabled: true },
    image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
    },
    callbacks: {
        open : function(){
            // var mp = $.magnificPopup.instance,
            //     t = $(mp.currItem.el[0]);
            // console.log( t.attr );
            $("test-popup-link").css("filter", "brightness(0.5)");
            console.log($("test-popup-link").src)
        }
    }
});