Something like this one?
<style>
#highlighter {
width: 250px;
height: 100px;
border: 1px solid red;
position: absolute;
display: table;
text-align: center;
}
#highlighter p {
vertical-align: middle;
display: table-cell;
}
.h_down p {
font-size: 30px;
}
.h_up p {
font-size: 50px;
}
</style>
<script>
function up(element) {
element.className="h_up";
}
function down(element) {
element.className="h_down";
}
</script>
<div id="highlighter" class="h_down" onmouseover="up(this);" onmouseout="down(this);"><p>let's see</p></div>