Hình ảnh đường viền-bán kính không hoạt động trong quá trình chuyển đổi css

Question

Tôi đang sử dụng border-radius: 50%; để tạo hình ảnh tròn. Theo mặc định, hình ảnh bị nhòe và thu nhỏ (có tràn ẩn) và khi di chuột, ảnh sẽ xóa mờ và thu phóng. Tuy nhiên, khi tôi sử dụng quá trình chuyển đổi CSS trên phần tử, nó tạm thời hiển thị tràn cho thời lượng chuyển đổi.

http://jsfiddle.net/jonny_me/cyvL61qx

Answer 1

Tôi tin rằng trên chuyển tiếp, nguyên tố này được đưa ra khỏi dòng chảy tài liệu, một cái gì đó giống như một cái bóng position: relative; và đưa trở lại một khi hình ảnh động hoàn tất.

Nếu bạn buộc z-index của cha mẹ cao hơn giá trị của con, cha/mẹ nên tiếp tục cắt phần bổ sung.

http://jsfiddle.net/cyvL61qx/4/

figure.effect-park { 
    background-color: #0D4C16; 
    border-radius: 50%; 
    z-index: 1; 
} 

figure.effect-park img { 
    z-index: 0; 
    opacity: 0.5; 
    -webkit-filter: blur(1.5px); 
    filter: blur(1.5px); 
    -webkit-transform: scale(1.15); 
    transform: scale(1.15); 
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; 
    transition: opacity 0.2s, transform 0.2s; 
} 

Answer 2

Chỉ cần chắc border-radius kế thừa

.parent { 
    border-radius: 50%; 
} 

.parent img { 
    border-radius: inherit; 
}