CSS Transparency and Overlapping Problem in Chrome

HTML & CSS
1

Hi,
I am using a custom font and using transparency for it but I have issue with overlapping when view it in Chrome. I’ve tried it in Windows7.

This is the result in Chrome:

And this one is Firefox output:

.entry-title a {
    opacity: 1;
    text-decoration: none;
    transition: color 0.3s ease 0s, background-color 0.3s ease 0s, border-color 0.3s ease 0s, box-shadow 0.3s ease 0s, opacity 0.3s ease 0s;
}

.entry-title a:hover {
    color: #566471;
    opacity: 0.65;
}

Could you please help me to remove that overlapping issue in Chrome browser?

Thanks in advance

2

Do you really want transparency, or would it work just to fade the text to a lighter color. That’s easier on the browser.

3

Thanks for your advice! I switched to new color option.