I have a list which has round elements in it. They have a image in the background and on hover the other div is supposed to become visible as an overlay. It works so far, however there is still a visible border, indicating that the hovered div is not perfectly overlaying the other rounded element.

HTML:

```
<ul>
    <li>
        <div class="hover"></div>
    </li>
    <li>
        <div class="hover"></div>
    </li>
    <li>
        <div class="hover"></div>
    </li>
</ul>

```

CSS:

```
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
    height: 140px;
}
li {
    width: 140px;
    height: 140px;
    margin: 0;
    padding: 0;
    display: inline-block;
    border-radius: 70px;
     background: url(http://www.nationalflaggen.de/media/flags/flagge-thailand.gif);
}
.hover {
    border-radius: 70px;
    width: 140px;
    height: 140px;
}
.hover:hover {
    background-color: rgba(255,255,255,.9);
}

```

I added a fiddle since I really don't know how to make them perfectly overlapping.

Thanks for your help.

UPDATED THE FIDDLE:
<http://jsfiddle.net/pL9Aa/1>