Apply blend modes to images with colors or other images
JavaScript
Switch branches/tags
Nothing to show
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