Interactive Bereich der verknüpften Bilder mit abgerundeten Ecken

Question

ich dieses kleine Widget baue: http://codepen.io/JonnyNineToes/pen/zGYxwV

Es ist im Grunde ein Bild, das Sie klicken können, und haben zusätzliche Informationen über das Bild „herausrutschen“ von hinten.

Das Problem, das ich habe, ist mit dem anklickbaren/einführbaren/interaktiven Bereich des Widgets. Obwohl ich Border-Radius verwendet habe, erhalte ich immer noch einen quadratischen klickbaren Bereich um das Widget herum. (Bewegen Sie die Maus, wo die Ecken der Box sein sollten.)

Ich habe die Quelle des Problems bestimmt, um mit dem Bildelement selbst zu sein. Wenn ich das Bildelement entferne, habe ich dieses Problem nicht mehr.

Ich habe das schon gefunden ... Why is the margin space of my image link clickable? Ich habe das "display: block;" Regel von der Klasse des Bildes, und ich habe immer noch das Problem mit diesem "Ghost-Bereich".

Ich bin mir nicht sicher, was mit diesem Element los ist. Dies sind die einzigen Arten an sie angelegt („.profile“ ist die Klasse des Bildes):

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

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

EDIT: Ich habe auch um mit geliebäugelt ‚overflow: hidden;‘ als einige Stack Overflow Threads vorgeschlagen, aber das hat auch nicht geholfen.

EDIT 2: Fand diese:

• 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

Eine Lösung, die für Chrome (Firefox 37 scheint zu funktionieren wie erwartet) zu arbeiten scheint Verwenden Sie ein anderes Element mit einem Hintergrundbildsatz. Alles andere ist gleich. Natürlich verlieren Sie das Alt-Attribut. Wenn das von Ihnen verwendete Bild mehr als nur ästhetisch ist, sollten Sie eine Möglichkeit finden, diese Informationen auf andere Weise zu verwenden, oder sich an den Tag <img /> halten.

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

Codepen Example