<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);
}