<div class="wrap">

  <div class="block">block1</div>

  <svg>
    <defs>
      <mask id="mask" x="0" y="0" width="100%" height="100%">
        <rect x="0" y="0" width="100%" height="100%" fill="#000"></rect>
        <rect x="0" y="0" width="100%" height="100%" fill="#fff"></rect>
        <text x="50%" y="50%" text-anchor="middle">SvG</text>
      </mask>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" mask="url(#mask)" fill="green" fill-opacity=".7"></rect>
  </svg>

  <div class="block">block2</div>

</div>

body {
  margin: 0;
}

.wrap {
  display: flex;
  height: 100vh;
  background: url(https://picsum.photos/seed/picsum/700);
  background-size: cover;
  overflow: hidden;
}

.block {
  background-color: green;
  height: 100%;
  flex-grow: 1;
  border: 1px solid tomato;
  opacity: 0.7;
}

svg {
  width: 100%;
  height: 100%;
  font-size: 50px;
}

svg > rect {
  transform-origin: center;
  transition: 0.5s;
}

svg:hover > rect {
  transform: scale(2);
}