Very difficult to solve and strange CSS3 opacity transition issue (…must be a bug?)

Question

I am absolutely tearing all of my hair out with this highly frustrating and strange CSS problem I am having.

I am using the Bones boilerplate to make a website, and

Answer 1

I suggest using jQuery to handle your opacity rather than using the CSS3 attributes because you are correct in that your max-width is messing, unhappily, with your transitions.

$(".gallery-icon img").hover(function(){
    $(this).fadeTo(fast, 0.7);
}, function(){
    $(this).fadeTo(fast, 1.0);
});

Using jQuery will fix a lot of these little glitches with transitions and make sure your opacity change is done cross-browser-compatibly (yes, I know that there are lots of tags for transitions for browsers, but there aren't attributes for all browsers.) :) Hope that helps!