0

I have a simple form like this:

<section class="subscribe" title='Lorem Ipsum'>
    <form class="form-wrapper cf" method="post">
        <input class="tiptipNewsletterInfo" id="emailInputText" name="email" placeholder="Enter your email here..." />
        <button class="showforDesktopsOnly" id="submitBtnForDesktop" type="submit">Subscribe</button>
    </form>
</section>

Now, I want to change the background image being displayed on the submit button when the mouse hovers over it. For this I've tried using the following CSS, but its not working:

.form-wrapper #submitBtnForDesktop {
    background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 0 transparent;
    transition: background-image 0.5s;
}

.form-wrapper #submitBtnForDesktop:hover {
    background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 -28px transparent;
}

I am currently using transition: background-image 0.5s; elsewhere to change other background images on mouse hover, but it's just not working in this case.

Anyone know why ?

JSFiddle: http://jsfiddle.net/ahmadka/49nzM/

1 Answer 1

0

css3 transitions only work on numeric and (in some browser) color hex values, but not on image backgrounds as you are trying to do

to achieve the "fade from one image to another" that you want, you'll need to change your html&css;

html

....
<button class="showforDesktopsOnly" id="submitBtnForDesktop" type="submit">
    <div class="hax"></div>
    Subscribe
</button>
....

css

....
#submitBtnForDesktop .hax{
    width:100%;
    height:100%;
    background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 0 transparent;
    transition: opacity 0.5s;
    opacity:1
}
#submitBtnForDesktop:hover .hax{
    opacity:0
}
....
3
  • If I change it to background-position, there is a transition, but not the fade transition I wanted. Instead one image moves 'out' vertically, and another 'moves in'
    – Ahmad
    Sep 14, 2013 at 20:45
  • I'm guessing splitting the image into 2 might work for me, but I want to avoid that as I intend to use sprites.
    – Ahmad
    Sep 14, 2013 at 20:47
  • I know.. thats also what your css tells the browser to do. if you want to fade, you can achieve that with a sprite, but you will need 2 stacked elements where one does a opacity:0 in the :hover class (with transition set to opacity)
    – japrescott
    Sep 14, 2013 at 20:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.