<div class="my-media-element"></div>
<div class="my-media-element blended"></div>
/* styles for the two divs */
.my-media-element {
  
  /* dimensions */
  width: 600px;
  height: 288px;
  
  /*  backgrounds defined separately */
  background-color: #f07e32;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/none.jpg);
}

/* styles for the div with blending mode applied */
.blended {
  mix-blend-mode: color-dodge;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.