Apply blend modes to images with colors or other images
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
jquery.blend.js
jquery.blend.min.js
readme.md

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