오버 플로우없이 둥근 모서리가있는 CSS 색조 이미지

Question

onHover 이미지의 색조를 채려고합니다. 숨길 수있는 방법

합니다 (이 맨 왼쪽 위에 마우스를 가지고)

: 나는 CSS를 작동하지만 가장자리를 반올림하거나 완전히 부모가 검은 배경을 보여 기입하지 않는 이미지의 일부가 검은 색이므로 img 만 색칠됩니까?

.thumb { 
    width:150px; 
    height:150px; 
    margin: 0px 5px 14px 14px; 
    float:left; 
    display:inline; 
background: black; 
    overflow:hidden; 
    cursor: pointer; 
    /*border: 2px solid #00A3C6; */ 
} 

.thumb img { 
    display: block; 
    -webkit-transition: all 0.25s linear; 
     -moz-transition: all 0.25s linear; 
     -ms-transition: all 0.25s linear; 
     -o-transition: all 0.25s linear; 
      transition: all 0.25s linear; 

} 

.thumb:hover img { 
    opacity: 0.7; 
}​ 

Answer 1

이미지가 둥근 모서리 경우, 당신은 "색조"컨테이너의 둥근 모서리를 설정하기 위해 CSS에서 border-radius를 사용할 수 있습니다

여기 내 CSS입니다.

실제 이미지에 흰색 경계가있는 경우 ... 운이 좋지 않습니다. crop 이미지를 사용할 수 있지만 모든 종류의 이미지에 대해 동적으로 수행 할 방법이 없습니다.

Answer 2

검은 색을 어떻게 숨겨서 img 만 색칠 할 수 있습니까?

.thumb에서 background: black을 삭제 해보세요.

P. display: inline도 필요 없습니다.