<div class="warp">
  <div>
    <img class="images" src="http://5b0988e595225.cdn.sohucs.com/images/20190827/54d8af48109c428c8bb416620e56481c.jpeg" />
    <h2>normal</h2>
  </div>
  <div>
    <img class="img-tr" src="http://5b0988e595225.cdn.sohucs.com/images/20190827/54d8af48109c428c8bb416620e56481c.jpeg" />
    <h2>mix-blend-mode: multiply;</h2>
  </div>

</div>
body {
  background-color: #d0d0d0;
}
h2 {
  font-size: 20px;
}
.warp {
  display: flex;
  width: 50vw;
  margin: 0 auto;
}
.warp div {
  width: 50%;
  text-align: center;
}
.warp div img {
  width: 100%;
}
.img-tr {
  mix-blend-mode: multiply;
}

@media (max-width: 960px) {
  .warp {
    flex-direction: column;
    width: 100%;
  }
  .warp div {
    width: auto;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.