How to blur the_post_thumbnail() via blur.js (jquery)?

Question

I want to use blur.js (blurjs.com) to blur the post thumbnail. But it seems that the .js can't grab the image out of the_post_thumbnail(). If I follow the instructions from the website and build my own two testing-divs with a background - it's working! So the problem has to be how to get the image from "the_post_thumbnail()" read out by the custom-blur.js. Seems like blur.js needs a background-image to work.

This is my php-file:

    <?php if ( has_post_thumbnail() ) :?>
    <?php // USE LIGHT BOX OR POST URL in Image
    $useLightBox  =  $shortcodeData['wmlo_use_lightbox'];
    $imageLink    =  get_permalink();        
    if ($useLightBox == 'yes'):
        $largeImageSrc  = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large', false, '');
        $imageLink      = $largeImageSrc[0]; //Send image path
    endif;  
    // SET $imageLink for feature image a tag
    ?>

    <div class="wpme_image">
    <div class="testtext">asdafsd afsdfdsad sasdaf dsf</div>

    <a href="<?php echo $imageLink; ?>"><div class="testbg"><?php the_post_thumbnail(); ?></div></a>

    </div>
<?php endif; ?><!-- EOF featured image -->

This an extra custom-blur.js:

// Blur.js part of image
// ----------------------------------------------------
    $('.testtext').blurjs({
        source: '.teeestbg',
        radius: 10,
        overlay: 'rgba(255,255,255,0.4)'
    }); // EOF blurjs

Answer 1

I figured it out. blur.js needs an background-image to work.

i had to set the image as background separately:

<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<a href="<?php echo $imageLink; ?>">
    <div class="testbg" style="background-image: url('<?php echo $thumb['0'];?>')">
       <?php the_post_thumbnail(); ?>
    </div>
</a>