Round Image Acting as Square

Vote count:

0

I have an image that is positioned over the top of a large anchor. The rounded image visually looks correct, however the image still acts as square on the DOM and is restricting access the anchor underneath.

How can I make it so that the rounded image does not have a square selectable area?

Here is a JS fiddle to show the problem. http://ift.tt/1GR7oBn The entire blue square is an anchor, but notice even though the image is round, it still have square corners blocking the anchor. If the cursor is to close to the image the anchor does not enter hover state.

Code from JSFiddle:

<div id="wrapper">
    <div class="outer">
        <a href="#">
            anchor
        </a>
    </div>
    <img src="http://ift.tt/1EA2ny7" alt="" class="circle" />
</div>

#wrapper {
    position: relative;
    width: 500px;
    height: 500px;
}

.outer {
    background-color: blue;
    height: 250px;
    width: 250px;
    z-index: 8;
}

.outer a {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 9;  
}

.outer a:hover {
    background-color: green;
}

.circle {
    display: block;
    background: red;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 11;
}

asked 2 mins ago

user1043177

11

Round Image Acting as Square