Edit in JSFiddle

<div class="blue-container">
	<div class="green-container">
		<div class="container">
			<p class="title">A Title</p>
			<p class="content">Hover on the different color areas to change the size of this text and the title.</p>
		</div>
	</div>
</div>

.blue-container{
	--title-text: 18px;
	--main-text: 14px;
}
.blue-container:hover{
	--title-text: 24px;
	--main-text: 16px;
}
.green-container:hover{
	--title-text: 30px;
	--main-text: 18px;
}
.title{
	font-size: var(--title-text);
}
.content{
	font-size: var(--main-text);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

.blue-container{
	background: #64B5F6;
	padding-left: 50px;
}

.green-container{
	background: #AED581;
	padding-left: 50px;
}

.container{
    background: #fff;
    padding: 20px;
}

p{
	transition: 0.4s;
}

.title{
	font-weight: bold;
}