Skip to content

farski/jquery-blend

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published