SOURCE

<div class="orange-container">
	Hover orange to make blue bigger.
	<div class="red-container">
		 Hover red to make blue even bigger.
		<div class="container">
			<p class="content">Hover on the different color areas to change the size of this text and the title.</p>
		</div>
	</div>
</div>

.orange-container {
  --main-text: 18px;
}
.orange-container:hover {
  --main-text: 22px;
}
.red-container:hover {
  --main-text: 26px;
}
.title {
  font-size: var(--title-text);
}
.content {
  font-size: var(--main-text);
}

.container:hover {
  --main-text: 18px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #eee;
  padding: 30px;
  font: 500 14px sans-serif;
  color: #333;
  line-height: 1.5;
}

.orange-container {
  background: orange;
}

.red-container {
  background: red;
}

.red-container,
.orange-container {
  padding-top: 10px;
  padding-left: 50px;
}

.container {
  background: blue;
  padding: 20px;
  color: white;
}

p {
  transition: 0.4s;
}

.title {
  font-weight: bold;
}