SighFye SighFye - 2 months ago 10
CSS Question

Color of div hangs over the background image on hover over

Explanation

Im trying to make a few buttons.
I have a background image on a div, parts of this images are transparent. The background image is a circle.
When the user hovers over that div it changes the background to purple showing through the transparent parts.
The div is 80px x 80px. Same with the background image.
The radius of the div is 100px;

Problem

When the user hovers over the div, there is a small part of the purple showing outside the background image.

How do I stop this from happening?

HTML Code

<div id='Menu'>
<div onclick="gotoPage('HomePage')" class='MenuItem' id='home'>
Home
</div>
<div onclick="gotoPage('AboutUsPage')" class='MenuItem' id='team'>
About Us
</div>
</div>


CSS Code

#Menu
{
width: 80px;
}
.MenuItem
{
font-family: 'Share Tech', bold, sans-serif;
background-image: url(../images/button.png);
color: rgb(51, 0, 102);
text-align: center;
vertical-align: center;
margin-top: 25px;
border-radius: 999px;
width: 80px;
height: 80px;
line-height: 80px;
}
.MenuItem:hover
{
background-color: rgba(51, 0, 102, 1);
color: darkgray;
cursor: pointer;
/**position: relative;
top: -5px;
left: -5px;
margin-bottom: -20px;**/
}


Example Page

Answer

Assuming every thing is as you say, I would only suggest that you add this to ensure the bg image is sized and located correctly:

background-position:center;
background-size:80px 80px;

Also, the border-radius should be amended to:

border-radius: 50%;

JSFiddle Demo