zona interattiva di immagini collegate con gli angoli arrotondati

Question

sto costruendo questo piccolo widget: http://codepen.io/JonnyNineToes/pen/zGYxwV

E 'fondamentalmente un'immagine che è possibile fare clic, e hanno informazioni supplementari su l'immagine "sfilare" da dietro di essa.

Il problema che sto avendo è con l'area cliccabile/hoverable/interattiva del widget. Anche se ho usato il border-radius, sto ancora ottenendo un'area cliccabile di forma quadrata attorno al widget. (Passa il mouse sul punto in cui dovrebbero essere gli angoli della scatola.)

Ho determinato la fonte del problema in modo che sia l'elemento immagine stesso. Se rimuovo l'elemento immagine, non ho più questo problema.

Ho già trovato questo ... Why is the margin space of my image link clickable? Ho rimosso il "display: block;" regola dalla classe dell'immagine, e ho ancora il problema con questa "area fantasma".

Non sono sicuro di cosa stia succedendo con questo elemento. Questi sono gli unici stili applicati ad esso (".profile" è la classe dell'immagine):

.profile, .description { 
    position: absolute; 
    border-radius: 150px; 
    width: 300px; 
    height: 300px; 
} 

.profile { 
    left: 0; 
    top: 0; 
    z-index: 2; 
} 

EDIT: ho anche accarezzato in giro con 'overflow: hidden;' come suggerito da alcuni thread di overflow dello stack, ma anche questo non ha aiutato.

EDIT 2: trovato questi:

• Should border-radius clip the content?
• How do I prevent an image from overflowing a rounded corner box with CSS3?
• CSS3 border-radius clipping issues

Answer 1

Una soluzione che sembra funzionare per Chrome (Firefox 37 sembra funzionare come previsto) è quello di usa un altro elemento con un set di immagini di sfondo. Tutto il resto è lo stesso. Naturalmente perdi l'attributo alt. Se l'immagine che stai utilizzando è più che estetica, dovresti trovare un modo per fornire quell'informazione in un altro modo o attenersi al tag <img />.

<span style="background: url('http://i.imgur.com/BfLc7dD.jpg')" class="profile"> 

Codepen Example