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.
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.
@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.
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!
Could you instead use an image element, with positioning, and overflow: hidden?
EDIT: Never mind, pretty obvious now that I looked.