Replace the default "X" close button with the classic lightbox cross in circle .png image

[rogerlyons]

I want to replace the default "X" close button with the classic lightbox cross in circle .png image but can't seem to find an example to try.
Please assume no knowledge on my part. I have some existing CSS in place that I have tried for positioning and colour:
<style>
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close{
top: -18px !important; right: -18px !important;
color: white !important; }
.mfp-image-holder .mfp-close:hover, .mfp-iframe-holder .mfp-close:hover{
top: -18px !important; right: -18px !important;
color: red !important; }
</style>
This worked well. I should say I'm using this within the WYSIWYG Web Builder 12 software which means I have to over-ride the default CSS generated by the package.
Regards Roger

[rogerlyons]

I have found an answer that works for me.
Within the document.ready script
callOpen: function (scr,data,$this) { setTimeout(function() { $('.mfp-close').html('').append('<img class="mfp-closer" src="magnific/close.png" width="40px" height="40px"/>'); $('.mfp-closer').click(function() {$('.mfp-close').trigger('click')}); $('.mfp-close').on('mouseover', function () { $(this).find('img').attr('src', 'magnific/closeRed.png'); }).on('mouseout', function () { $(this).find('img').attr('src', 'magnific/close.png'); }); }, 0); },

And my other CSS changed to
<style> /* Magnific Popup change close image position and overlay colour to solid */ .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close{ top: -12px !important; right: -30px !important; } .mfp-bg{ opacity: 1.0 !important; } </style>