CSS3(Or jQuery)Fade in Image

Question

So, I have a little bit of code, and what I want to modify it to do, is have a specific background image, then fade in a different one on hover. I was just wondering, CSS3 or jQuery. If you want to suggest one, a good place on how to achieve this would be nice too.

Did you try http://stackoverflow.com/questions/7319552/can-i-fade-in-a-background-image-css-background-image-with-jquery or http://stackoverflow.com/questions/5947582/fade-background-images-with-css3 ? — Ejaz, Mar 28 '13 at 23:54
The first one didn't work for me, the second doesn't use background images. — Ultimate, Mar 29 '13 at 00:01

Mennan · Accepted Answer · 2013-03-29T00:27:38.333

0

See sample:

http://jsfiddle.net/GaYKF/56/

Use jquery:

 $("#myDiv").hover(
function(){
  $(this).fadeTo('slow', 0.3, function()
    {
        $(this).css('background-image', 'url("http://1.bp.blogspot.com/-tOHKWImzMJQ/TlHqjy1C_II/AAAAAAAAAWw/T5WGegi1sVc/s320/blue+%25288%2529.jpg")');
    }).fadeTo('slow', 1);
}, 
function(){
   $(this).fadeTo('slow', 0.3, function()
    {
        $(this).css('background-image', 'url("http://1.bp.blogspot.com/-nI97Eqlkfh0/TlHp2CS0_XI/AAAAAAAAAWU/kRGbOd6YNZg/s320/blue+%25281%2529.jpg")');
    }).fadeTo('slow', 1);
});

edited Mar 29 '13 at 00:27

answered Mar 28 '13 at 23:44

Mennan

4,451
13
54
86

Didn't quite work...it set the background image to the second image, and than didn't work.. – Ultimate Mar 28 '13 at 23:52
You changed it, just a sec – Ultimate Mar 28 '13 at 23:54
Okay, just give me till tomorrow to test, kinda busy currently. – Ultimate Mar 30 '13 at 02:25

score 0 · Answer 2 · answered Mar 28 '13 at 23:51

To complete Mennan's solution, if you use jQuery, do it like this to change the background image on hover on a element (<div> in this case).

$('#mydiv').mouseenter( function() {
  $(this).css('background-image','url(/images/second.png)');
}).mouseleave(function() {
  $(this).css('background-image','url(/images/original.png)');
});

CSS3(Or jQuery)Fade in Image

2 Answers2