SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    http://www.mymarketingsolutions.com/Site/

    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
    Ryan.
    Last edited by Mittineague; Apr 1, 2011 at 13:26. Reason: per OP request

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,


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

    e.g.

    Code:
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •