Question

I am trying to tint images onHover. I have the css working but some of the images which have rounded edges or don’t completely fill the parent show the black background:

(The far left has the mouse over it)

How can hide the black so only the img is tinted?

Here is my 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

If the image has rounded corners, you can use border-radius in your css to set rounded corners of the “tint” container.

If the actual image has a white border… you’re kind of out of luck. You can crop images but you don’t have any way to doing this dynamically for any kind of image.