Avatar of AXISHK
AXISHK
 asked on

CSS in HTML

Any idea how the CSS "crossfade img.top" and "crossfade img" can provide an effect that  3 product images being displayed will fade out after a few seconds and will be replaced with another 3.


The class "top" and "bottom" seem to group the photos to display.  However,  keyframe "crossfadeFadeInOut" is applied to "#crossfade img.top" only. So, I should see 6 photos fade out instead of 3 at a time. Where does it control only 3 photo is displayed at a time ?
Thx
C--wamp-www-index.php
C--wamp-www-css-style.css
CSSHTML

Avatar of undefined
Last Comment
AXISHK

8/22/2022 - Mon
Steve Bink

It controls only the 3 photos because those are the only three with animation keyframes applied.  The other animations (for .bottom) essentially have nothing changed.  So, while they are technically going through an animation, there is no difference to see.
ASKER CERTIFIED SOLUTION
Member_2_248744

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
AXISHK

ASKER
#crossfade img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

The above CSS should apply to all image. I try to leave 3 images with class="bottom" but there is not fade in/out effect.



Thx again.
Member_2_248744

you do NOT need the CSS in any image like this -
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
         transition: opacity 1s ease-in-out;

That CSS is only used for changes in CSS opacity by javascript on a page, , BUT it makes NO difference , and is NOT needed for CSS keyframes  animations.


Also the keyframes CSS definition you use Will NOT work in firefox, -
 @keyframes crossfadeFadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

because I tried it, and got nothing, no fade at all, You incorrectly set the opacity levels, and I also think you have not used proper percentage points.

Did you try my html and css ?

AND you have images with the   class="bottom"   but do not have ANY CSS for the bottom class attributes, so the  class="bottom"  does not do anything that I can tell.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
AXISHK

ASKER
Thx.