Zuckmantel blend mode

by kybernaut

HTML

<h4>Bez efektu</h4>
<div class="bg"></div>

<h4>Blend mode: Lighten, hue</h4>
<div class="blend"></div>

<h4>Blend mode: Color</h4>
<div class="blend color"></div>

<h4>Blend mode: Multiply</h4>
<div class="blend multiply"></div>

<h4>Blend mode: screen</h4>
<div class="blend screen"></div>

<h4>Blend mode: overlay</h4>
<div class="blend overlay"></div>

<h4>Blend mode: darken</h4>
<div class="blend darken"></div>

<h4>Blend mode: lighten</h4>
<div class="blend lighten"></div>

<h4>Blend mode: color-dodge</h4>
<div class="blend color-dodge"></div>

<h4>Blend mode: color-burn</h4>
<div class="blend color-burn"></div>

<h4>Blend mode: hard-light</h4>
<div class="blend hard-light"></div>

<h4>Blend mode: soft-light</h4>
<div class="blend soft-light"></div>

<h4>Blend mode: difference</h4>
<div class="blend difference"></div>

<h4>Blend mode: luminosity</h4>
<div class="blend luminosity"></div>

<h4>Původně na stránkách</h4>
<div class="relative">
<div class="puvodni"></div>
<div class="o"></div>
</div>

CSS

.bg
{
        width:275px;
        height:154px;
        background: url("http://postproduction.zuckmantel.tv/wp-content/uploads/sites/3/2017/09/bmw-5-series.jpg") no-repeat center center;        
}
.blend
{
        width:275px;
        height:154px;
        background:rgba(0, 6, 251, 1) url("http://postproduction.zuckmantel.tv/wp-content/uploads/sites/3/2017/09/bmw-5-series.jpg") no-repeat center center;
        /*background-blend-mode: hue;*/
        background-blend-mode: lighten, hue;
}

.color
{
        background-blend-mode: color;
}
.multiply
{
  background-blend-mode: multiply;
}
.screen
{
        background-blend-mode: screen;
}
.overlay
{
  background-blend-mode: overlay;
}
.darken
{
        background-blend-mode: darken;
}
.lighten
{
  background-blend-mode: lighten;
}
.color-dodge
{
        background-blend-mode: color-dodge;
}
.color-burn
{
  background-blend-mode: color-burn;
}
.hard-light
{
        background-blend-mode: hard-light;
}
.soft-light
{
  background-blend-mode: soft-light;
}
.difference
{
        background-blend-mode: difference;
}
.luminosity
{
  background-blend-mode: luminosity;
}

.puvodni
{
        width:275px;
        height:154px;
        background:url("http://postproduction.zuckmantel.tv/wp-content/uploads/sites/3/2017/09/bmw-5-series.jpg") no-repeat center center;
}

.relative {
  position: relative;
}

.o {
  width:275px;
  height:154px;
  background: rgba(0,6,251,.4);
  position: absolute;
  top: 0;
}

h4 {
  margin-top: 20px;
}