Grow your CSS skills. Land your dream job.

Inline Styles Not Accepting Transition

  • # October 6, 2011 at 2:18 am

    Hello team! I’ve stumbled across an issue that I can’t seem to wrap my head around.

    Due to how the site will be set up in WordPress, I need to use inline styles to set the backgrounds of a couple divs (they will be set by using the post_thumbnail function). When you hover over these divs, the background is supposed to shift slightly using the wonderful new ‘transition’ element.

    Here’s the rub: the inline styles do not want to be modified! I’m new to this transition stuff, so I’ve probably just missed something.

    Here’s an example: http://jsfiddle.net/gpU2j/

    The top div is using a background set in the stylesheet and works as intended on hover. The second div’s background does not shift when you hover over it, this is the div that is having its background set by inline style.

    Any help would be greatly appreciated!

    # October 6, 2011 at 2:35 am

    Not sure why it’s not working, I assume it just doesn’t like inline styles.

    Could you instead use an image element, with positioning, and overflow: hidden?

    # October 6, 2011 at 2:40 am

    @TheDoc – fixed http://jsfiddle.net/gpU2j/1/

    # October 6, 2011 at 2:45 am

    @ChristopherBurton What was causing the problem?

    EDIT: Never mind, pretty obvious now that I looked.

    # October 6, 2011 at 2:59 am

    Wow. Excellent find @ChristopherBurton. I’m wondering why that’s even the case?

    # October 6, 2011 at 3:08 am

    @TheDoc – Oddly, I didn’t think it was going to work at first. When it did, I tried searching to see why transitions do not work on shorthand inline styling with no luck. Perhaps I wasn’t looking that hard.

    # June 5, 2014 at 5:59 am

    I am also encountering issues with transitions not working on inline styles (in this case margin-left) in Firefox.

    The solution by @ChrisBurton does not work in the latest Firefox (29.0.1). :(

    # June 5, 2014 at 6:36 am

    Care to share a link? And you probably should have started a new thread rather than tag onto a 3 year old thread.

    # June 5, 2014 at 6:40 am

    Apologies for reviving a dead thread; I didn’t pay attention to how old it was.

    And @ChristBurton already provided the link. The link in his solution was what I was referring to not working.

    Also, I should point out that the issue doesn’t seem to just be inline styles. I reproduced the same issue with toggling of a class. Firefox seems… sketchy with some transitions.

    # June 5, 2014 at 6:41 am

    @Sikosoft

    Edit: The reason the transitions in the fiddle do not work in Firefox is because it was targeting webkit browsers.

    Updated link: http://jsfiddle.net/nsGxd/

    # June 5, 2014 at 6:55 am

    Thanks, but I sorted it out already.

    I just wanted to reply to inform anyone who stumbled on the thread and also wondered why it didn’t work.

    Also, thanks for the clarification on it being a Chrome specific example. I was googling some Firefox things and had been under the impression this issue was also strictly Firefox. Perhaps I probably should have paid more attention to the code.

    In any event, I appreciate your wicked fast response. :)

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".