CODEWITHSUNDEEP
csshtmlhovergeometry
paelzer
paelzer

Reputation: 115

Perfectly overlapping round divs

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

Upvotes: 2

Views: 775

Answers (5)

dezman
dezman

Reputation: 19368

Looks like a sub-pixel problem -- the browser does a bunch of math to determine the smoothness of a curve using square pixels. And sometimes it doesn't render how you might expect.

You can simply remove the border-radius rule from the :hover pseudo class if you are keeping it transparent.

.hover {
    width: 140px;
    height: 140px;
}

Fiddle

If it needs to be round, I would override your image using the same element, instead of a nested element, like so:

li:hover {
    background: white;
}

Fiddle2

Upvotes: 2

Joseph Marikle
Joseph Marikle

Reputation: 78560

If in the production envirionment you can actually use a background color, you could also use a box-shadow

demo: http://jsfiddle.net/j4NFB/

.hover:hover {
    background-color: #FFF;
    box-shadow: 0 0 0 1px #fff;
}

Upvotes: 0

Eric Whitehead
Eric Whitehead

Reputation: 130

If your hover is only meant to cover the element, you do not need to put a border-radius on the hover element. Simply removing that line will resolve your issue:

.hover {
   width: 140px;
   height: 140px;
}

http://jsfiddle.net/pL9Aa/3/

Upvotes: 0

Shakesy
Shakesy

Reputation: 335

Just change #hovers border-radius: 62px;

Upvotes: 0

Rich Bradshaw
Rich Bradshaw

Reputation: 73025

You could add:

li:hover {
    background:none;
}

to ensure that the background on the li is gone.

It's weird though - does look like a rendering bug.

Assuming that you are going to have text or other content in the overlay, it's worth noting that setting the background to be slightly transparent (e.g. rgba(255,255,255,0.8)) makes the rendering error less noticeable.

Upvotes: 1

Related Questions