<div class="halftone">
  <img src='https://images.unsplash.com/photo-1496888057897-8a25eef593f6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjYxODE2Nzc&ixlib=rb-4.0.3&q=80&w=400' alt=''>
</div>

<img src='https://images.unsplash.com/photo-1496888057897-8a25eef593f6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjYxODE2Nzc&ixlib=rb-4.0.3&q=80&w=400' alt=''>

.halftone {
  filter: contrast(2) grayscale(1);
  margin-bottom: 1rem;
}
.halftone::after {
  content: '';
  display: block;
  width: 600px;
  height: 600px;
  position: absolute;
  top: 0;
  mix-blend-mode: multiply;
  background-image: radial-gradient(#fff 10%, transparent 90%);
  background-color: #000;
  background-position: 0 0;
  background-size: 10px 10px;
}

img {
  width: 600px;
  height: 600px;
  object-fit: cover;
}