CSS advanced hover effect?

This is my first time asking for advice on this forum, not sure if I’m doing it right! I’m looking to do a specific hover effect. I have custom designed typeface in PNG format that I would like to appear as overlay on hover. I have 12 clickboxes on the same page that I want to apply this effect to, is this possible? So far, I have only ever set up my CSS to basic 2px line or color overlay hover effect, like so:

div.clickBox-Ministries:hover{
border-bottom: 2px solid white;
}

OR

div.clickBox-Ministries:hover{
background-color: #1380BB
opacity: 0.3;
cursor: crosshair;
}