We help IT Professionals succeed at work.

CSS in HTML

AXISHK
AXISHK asked
on
159 Views
Last Modified: 2017-04-02
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
Comment
Watch Question

CERTIFIED EXPERT
Top Expert 2004

Commented:
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.
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
#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.

Commented:
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.

Author

Commented:
Thx.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions