Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Feb 21, 2012

readme.md

jquery-blend

Blending modes for jquery

Examples

Basic pattern

// Overlay with a solid color
$('img').blend({mode: 'overlay', adjustment: 'rgb(114, 25, 219)'});

// Overlay with an image
$('img').blend({mode: 'difference', adjustment: '/path/to/mask.jpg'});

Usage idea

$(function() {
  $('.display img').each(function() {
    $(this).blend({mode: $(this).attr('data-blend-mode'), adjustment: $(this).attr('data-blend-adjustment')});
  });
});

<div class="display">
  <img src="/photo1.jpg" data-blend-mode='overlay' data-blend-adjustment='rgb(18,187,93)' />
</div>

Modes

  • normal

  • darken

  • multiply

  • colorburn

  • linearburn

  • lighten

  • screen

  • colordodge

  • lineardodge

  • overlay

  • softlight

  • hardlight

  • difference

  • exclusion

  • subtract

About

Apply blend modes to images with colors or other images

Resources

Releases

No releases published
You can’t perform that action at this time.