My first thought would be to make a div with relative position, then within that div place your large text (in a div of it’s own) positioned absolute.
Then duplicate that div, give it an additional class combo (blue) and set him to display:none
Then have an interaction on hover to make your parent div scale or whatever, and to also make the blue div display and the darker colour text hide.
Or perhaps you could use opacity rather than the display method.
I expect there is a simpler way, but only have about 2 minutes to reply to this (busy working on a Saturday?? something wrong there…)