jsfiddle-console example

https://github.com/eu81273/jsfiddle-console

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="card bg-dark text-white">
    <img src="https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=100&w=240" 
    class="card-img" alt="...">
    <div class="card-img-overlay">
     
      <p class="card-text">
        Content here.
      </p>      
    </div>
  </div>

CSS

.card-text {
  background: white;
  color: #000;
  height: 100%;
  mix-blend-mode: screen;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
  text-align: center;
  padding: 30px;
}

.card {
  width: 400px;
  height: 600px;
}