Coordinate text format with background images on anchor mouseover - html

Question

I am working on an old website for a client and I have run into a problem creating a button link. I considered creating a box with text in it, but I cannot produce text in the graphic that is as clear as the text generated in html. I have, therefore, created two boxes with blank space to accommodate the text. The text is superimposed over the box. The relevant code follows here.
.style1 {
font-size: 14px;
font-weight: bold;
}
.container {
position: relative;
text-align: center;
color: white;
font-weight: bold;
line-height: 100%;
}
.container:hover {
color: #000000;
}
.centered {
position: absolute;
top: 49%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
color: white;
}
.initials {
font-size: 16px;
}
.card {
width: 170px;
height: 100px;
background: url("otec_link.png") no-repeat;
display: inline-block;
}
.card:hover {
background: url("otec_link_gray.png") no-repeat;
color: black;
text-decoration: none;
}
.words {
color: #FFFFFF;
text-decoration: none;
}
.words:hover {
color: #000000;
text-decoration: none;
}
<div class="container">
<div>
<div class="centered" style="text-align:left;">
<span class="initials">O</span>nline<br><span class="initials">T</span>eacher<br><span class="initials">E</span>ducation<br><span class="initials">C</span>enter</div>
<span class="card"></span>
</div>
</div>
You can run the code to see the issues.
Here is what I am looking for:
A red box with white text.
On mouseover, a gray box with black text with anchor link available text and graphic.
Here is what I am getting:
A red box with white text.
On mousover the box, a gray box with white text, and when the pointer passes over the text it turns black and the red box returns.
There is a gap in the anchor link between the lines of text.
I have tried to create what is basically two links, one for the box and the other for the text to get around the font quality issue.
The website is comechildrensing.com. You can go there to see the issue in context. It is the top button in the vertical red menu bar on the left. If there is a tool I can use to make clean, sharp text in the graphics, it would make the whole mess go away. Otherwise, I am open to any solution that will resolve the problems.

Answer 1

Right now you've created three different hovers for three different elements that the user can hover over (pretty much) individually. It's better to do one hover and have it target other elements instead.
.container:hover .card {
background: url("otec_link_gray.png") no-repeat;
}
.container:hover .words {
color: black;
text-decoration: none;
}