Round Image Acting as Square

Question

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. https://jsfiddle.net/jp81fp3u/1/ 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:

#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;
}

        <div id="wrapper">
    <div class="outer">
        <a href="#">
            anchor
        </a>
    </div>
    <img src="http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" class="circle" />
</div>

Give the anchor the same border-radius as the image. – rlemon Mar 17 '15 at 14:01 — rlemon, Mar 17 '15 at 14:01
which browser? works well on FF37 and Chrome 41 – Kaiido Mar 17 '15 at 14:03 — Kaiido, Mar 17 '15 at 14:03

score 7 · Accepted Answer · edited May 23 '17 at 11:50

7

jsFiddle

Make the image a div with border-radius to half it's width so that it becomes a circle. Then use background-image to make the div into your 'image'

HTML

<!-- Change this -->
<img src="http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" class="circle" />
<!-- To this -->
<div class="circle catpic"></div>

CSS

// Add this
.catpic {
    background-image: url(http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg);
    background-size: cover;
}

Note, however, that IE8 does not support background-size, so you might have to have to use a number of ways to get around this.

edited May 23 '17 at 11:50

Community

1
1

answered Mar 17 '15 at 14:03

dayuloli

16,205
16
71
126

2

The question is now : *"why does it work with a div and not an image tag..."* – web-tiki Mar 17 '15 at 14:19
Great, thanks. As i'm using Angular I extended to this: `
`
– user1043177 Mar 17 '15 at 15:02

score 0 · Answer 2 · edited Apr 08 '21 at 07:16

0

Rounded image now has a circular selectable area.

.outer {
    background-color: blue;
    z-index: 8;
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    top:25px;
    left:25px;
    position:absolute;
}

edited Apr 08 '21 at 07:16

Glorfindel

21,988
13
81
109

answered Mar 17 '15 at 14:10

rgrano

351
1
6

Manoj Dhiman · Answer 3 · 2021-04-09T13:29:29.723

remove the height width from outer dive here is the link jsfiddle

<div id="wrapper">
    <div class="outer">
        <a href="#">
        
        </a>
    </div>
    <img src="http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" class="circle" />
</div>

css rule

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

.outer {
  background-color: blue;
  height: auto;
  width: auto;
  z-index: 8;
  /* overflow: hidden; */
}

.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;
}

My script fixed a broken link, but due to the licensing I cannot copy the code from jsfiddle. Please consider adding it as a snippet. — Glorfindel, Apr 08 '21 at 07:17

Round Image Acting as Square

3 Answers3