obszar Interaktywna obrazów połączonych z zaokrąglonymi narożnikami

Question

buduję ten mały widget: http://codepen.io/JonnyNineToes/pen/zGYxwV

Jest to w zasadzie obraz, który można kliknąć, a mają dodatkowe informacje o obrazie „ślizgać się” zza niego.

Problem, który mam, dotyczy klikalnego/hoverable/interaktywnego obszaru widgetu. Mimo że korzystałem z promienia obramowania, nadal otrzymuję kwadratowy obszar klikalny wokół widżetu. (Umieść wskaźnik myszy w miejscu, w którym powinien znajdować się narożnik).

Ustaliłem, że źródłem problemu jest element obrazu. Jeśli usunę element obrazu, nie mam już tego problemu.

Już znalazłem to ... Usunąłem "display: block;" rządzić z klasy obrazu i nadal mam problem z tym "obszarem duchów".

Nie jestem pewien, co się dzieje z tym elementem. Są to jedyne style zastosowane do niej („.profile” jest klasą obrazu):

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

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

EDIT: Ja również bawił się dokoła z «overflow: hidden;» jak sugerowały niektóre wątki przepełnienia stosu, ale to też nie pomogło.

EDIT 2: Znaleziono nich:

• 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

Rozwiązanie to wydaje się działać na Chrome (Firefox 37 wydaje się działać prawidłowo) jest użyj innego elementu z zestawem obrazów tła. Cała reszta jest taka sama. Oczywiście tracisz atrybut alt. Jeśli obraz, którego używasz, jest bardziej niż estetyczny, to powinieneś znaleźć sposób na podawanie tych informacji w inny sposób lub trzymaj się znacznika <img />.

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

Codepen Example