CSS3 Transitions

Looking for some help adding some transitions on the hover over images used on the navigation menu and 4 man solutions. As of right now they just change to another image of a different color.


I have used the transition properties to get the desired effect with backgrounds that are colored on other sites but having issue getting these to work on here.

Any help would be appreciate. Basically just want some type of fade in or out or something that would make the transition smoother on the hover effect.

Thanks again


Transitions don’t seem to change the opacity of images so you would need to use solid colours instead.


aside .ul2 li{
    -webkit-transition: all 1s ease-in; /*safari and chrome */
    -o-transition: all 1s ease-in; /* opera */
    -moz-transition: all 1s ease-in; /*moz */
    transition: all 1s ease-in; 
aside .ul2 li:hover{ background:red ; color:#fff; }

If you set up classes for each of those boxes and change the colour to match the images you had previously then it should work ok in browsers that support transitions.