Genesis Background Featured Image Effects

Description

USING THE CLIP

Set and forget.

OPTIONS

Background Effects –

By default, the Clip uses CSS filters with 10% blur. This can be adjusted by adding the following code to your custom Clip’s custom-style.css file (note: transform properties may also require adjusting to account for any blur on page edges) –

.genesis-bg-featured-img-fx {
    -webkit-filter: blur(10px); /* Adjust as required */
    filter: blur(10px); /* Adjust as required */
    -ms-transform:  scale(1.1); /* May require adjusting */
    -webkit-transform: scale(1.1); /* May require adjusting */
    transform: scale(1.1); /* May require adjusting */
}

Refer to the link below for additional filter options (i.e. none, blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia ) –
http://www.w3schools.com/cssref/css3_pr_filter.asp

Background Horizontal Flip –

The background can be flipped horizontally by adding the following code to your custom Clip’s custom-style.css file –

.genesis-bg-featured-img-fx {
    -ms-transform:  scale(-1.1,1.1);
    -webkit-transform: scale(-1.1,1.1);
    transform: scale(-1.1,1.1);
}

Conditions –

By default, the Clip adds the background to all single posts and pages (only when a featured-image is attached). However, conditions can be altered by adding the following filter code to your custom Clip’s custom-functions.php file –

add_filter( 'clip_genesis_bg_feat_img_fx_active', 'your_custom_filter' );
function your_custom_filter( $active ) {
    if( /* Add conditions here */ ) {
        return true;
    }
    return false; /* Or return $active for default */
}

NOTES

Backgrounds are active only when a featured image is present.