<div class="slanted slant-to-right">
  <p>This is some overlay text </p>
</div>

.slanted {
  position: relative;
  min-height: 200px;
  width: 30%;
  background: url(https://picsum.photos/id/1015/500/500) no-repeat;
  background-size: cover;
  margin: 10px;
  display: inline-flex;
  justfy-content: center;
  align-content: center;
}

.slanted:after,
.slanted:before {
  content: "";
  position: absolute;
}
.slant-to-right:before {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(236, 236, 236, 0.7);
  clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
}
.slanted p {
  position: relative;
  z-index: 2;
  margin: auto;
  font-size: 2rem;
  text-align: center;
}