# Related to images in CSS



## kool (Jun 25, 2012)

*►► Related to images in CSS. Need HELP...!!!!*

Hi Friends,

This question is asked by my GF. so kindly help.. 

I have designed a webpage, which contains a div* containing image (as a logo)*.  I want the images to fade-in and fade-out at certain time intervals for all the browsers. Presently, this is controlled by following css:-
*filter: progid dximagetransform.microsoft.alpha opacity*, but this works only for IE. I need some other alternative for this function which will work for all the major browsers, like IE(versions 7,8,9),firefox, chrome, safari and opera. Is there any other way for this except for Javascript?? I want something from CSS to make it work. 

Thanks.


----------



## clmlbx (Jun 26, 2012)

This is only possible with CSS3 check links below

*stackoverflow.com/questions/3079330/css3-fade-effect

CSS3 Transition

It can easily be done by Jquery fade in fade out effects.. Nothing much to learn just couple of lines of code.. and link to jquery library..

check this

jQuery Effect fadeIn() Method


----------



## ajayashish (Jun 26, 2012)

I think there are some HTC fix found to make IE behave properly with CSS3. Please google for this. 

CSS3 support in Internet Explorer 6, 7, and 8


----------



## abhidev (Jun 26, 2012)

jquery will be a better cross-browser option...css3 is not supported in older versions of IE


----------



## nbaztec (Jun 27, 2012)

1. You are doing the world a great disservice by using IE, coding for IE and/or supporting IE. There are great browsers, then there are good browsers, then barely callable browsers, then 50 feet of crap, then there's IE.

2. CSS property `opacity` along with `display:none` can be used to fade-in, and fade-out the images using a suitably coded setInterval() callback using step-function.

3. Use jquery fadeIn() and fadeOut() functions.

4. Use CSS3 and vendor specific transitions. Don't care about IE, it's MS's fault that their "browser" is worse than meh!


P.S. All discussion relates to IE5-8, but even IE9 ain't all that great albeit a step towards a better future.


----------



## Faun (Jun 27, 2012)

Jquery and Jquery UI


> $("#idofelement").animate({opacity: .4}, 300 );
> $("#idofelement").animate({opacity: 1}, 100 );


----------



## nbaztec (Jun 27, 2012)

Faun said:


> Jquery and Jquery UI
> 
> ```
> $("#idofelement").animate({opacity: .4}, 300 );
> ...



Actually, the better way to do it would be:

```
$('#id_1').fadeOut('slow', function(){
        $('#id_2').fadeIn('slow')
});
```


----------



## Faun (Jun 28, 2012)

^^It's another alternative and more customizable.


----------

