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
AXISHKAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve BinkCommented:
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.
Slick812Commented:
greetings AXISHK , the HTML and CSS you gave for the crossfade did not work in firefox, there was NO fade on any image. As to your question -
     "Where does it control only 3 photo is displayed at a time"

The reason that the cross fade is applied to only 3 images, is because Two Images in each span crossfade are absolute position and are layered (stacked) on top of each other, so the TOP layer image, is the only layer needed to fade in and out, as the under bottom image is NOT seen when the top image is seen full opacity.

here's code that worked for me in firefox -
<style>
.crossfade {
display: inline-block;
  position:relative;
  height: 250px; 
  width: 250px;
  margin-right: 40px;
}

.crossfade img {
  height:250px; 
  width:250px;
}

@keyframes crossfadeFadeInOut {
  0% {
  opacity:1;
  }
  100% {
  opacity:0;
  }
}

.top {
  position:absolute;
  left:0;
  z-index: 2;
  animation-name: crossfadeFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 3.5s;
  animation-direction: alternate;
}
 </style>

 <span class="crossfade">
	<a href="itemlist.php?category=CellPhone">
 	<img src="images/001.jpg" />
	<img  class="top" src="images/002.jpg" /></a>
</span>
<span class="crossfade">
	<a href="itemlist.php?category=CellPhone">
 	<img src="images/003.jpg" />
	<img  class="top" src="images/004.jpg" /></a>
</span>
<span class="crossfade">
	<a href="itemlist.php?category=Laptop">
 	<img src="images/005.jpg" />
	<img  class="top" src="images/001.jpg" /></a>
</span>

Open in new window


with that code I see 3 blocks (spans) with fading images in each

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AXISHKAuthor 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.
Slick812Commented:
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.
AXISHKAuthor Commented:
Thx.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.