Image de teinte CSS avec bords arrondis sans débordement

Question

J'essaye de teinter les images sur Hover. J'ai le travail css, mais quelques-unes des images qui ont des bords arrondis ou ne pas remplir complètement le parent montrer le fond noir:

(L'Extrême-gauche de la souris dessus)

Comment cacher le noir si seulement le img est teinté?

Voici mon css:

.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

Si l'image a des coins arrondis, vous pouvez utiliser border-radius dans votre css pour définir les coins arrondis du conteneur « teinte ». Si l'image actuelle a une bordure blanche ... vous n'avez pas de chance. Vous pouvez crop images mais vous n'avez aucun moyen de le faire dynamiquement pour n'importe quel type d'image.

Answer 2

Comment cacher le noir afin que seul le img soit teinté?

Voulez-vous supprimer background: black de .thumb?

P.S. display: inline n'est pas non plus nécessaire là