Rollover fade on fluid image

Question

I'm creating a responsive site with a gallery composed of fluids images . For this, I must use css img {max-width: 100%;} . I also want a fade effect on hover.

Does anyone have a solution to this?

So far, all the solutions I've tried, does'nt work with css img {max-width: 100%;}

Thank you very much for your help!

Answer 1

Define image width also along with its max-width. And it must be in pixels or em's. You don't need to keep max-width or min-width in %'s. Browser renders from its original width or height value. As

This is for example.

img{
    width:50%;
    height:30%;
    max-width:300px;
    min-height:100px;
    }

And every images'll be flexible with viewport.