Rollover continuously 3 images with CSS

Question

I'm new to CSS and I'm stuck with this code. It shows me the first image, when I put mouse over, it changes to second.jpg, but third doesn't work. I would like to put mouse over and change to second.jpg, then after few seconds to third.jpg, then after few seconds again to first.jpg and repeat continuously on mouse hover. Can someone help me?

 #cf { position:relative; height:400px; width:273px; margin:0 auto; } #cf img { position:absolute; left:0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } #cf img.top:hover { opacity:0; } 

 <div id="cf"> <img class="top" src="first.jpg" /> <img class="bottom" src="second.jpg" /> <img class="third" src="third.jpg" /> </div> 

Answer 1

Rotating through multiple images continuously cannot be done using transition because transitions just specify a one-time change of state. So, at best you can only rotate through the images once using transitions.

Your best option for this use-case would to make use of CSS3 animations which does allow for loops. Assuming you have 3 images and each image must be visible for 1s before showing the one below it, the total animation-duration should be 3s . Each image must go from opacity: 1 to opacity: 0 within 1s duration and so the animation's keyframes should be specified in such a way that upto 33% (because 33% of 3s = 1s), the image opacity is 1 and at 33.1% it quickly changes to 0 and stays that way till the end.

Animation on the topmost image can start immediately but that on the middle and bottom should start only after the image(s) on top of them have completed their animation. So, the image in middle should have a delay of 1s and the one at bottom should have a delay of 2s.

 #cf { position: relative; height: 200px; width: 200px; margin: 0 auto; } #cf img { position: absolute; left: 0; } #cf:hover img { animation: rotate-in-out 3s linear infinite; } #cf:hover img:nth-of-type(1) { animation-delay: 0s; } #cf:hover img:nth-of-type(2) { animation-delay: 1s; } #cf:hover img:nth-of-type(3) { animation-delay: 2s; } #cf img:nth-of-type(2), #cf img:nth-of-type(3) { opacity: 0; /* make them invisible initially */ } @keyframes rotate-in-out { 0.1%, 33% { opacity: 1; } 33.1%, 100% { opacity: 0; } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div id="cf"> <img class="top" src="http://lorempixel.com/200/200/nature/1" /> <img class="bottom" src="http://lorempixel.com/200/200/nature/2" /> <img class="third" src="http://lorempixel.com/200/200/nature/3" /> </div> 

---

In the above sample, the rotation is kind of abrupt (that is, it suddenly changes from one image to the next). If you need it to be graceful then the keyframes should be modified like in the below snippet:

 #cf { position: relative; height: 200px; width: 200px; margin: 0 auto; } #cf img { position: absolute; left: 0; } #cf:hover img { animation: rotate-in-out 3s linear infinite; } #cf:hover img:nth-of-type(1) { animation-delay: 0s; } #cf:hover img:nth-of-type(2) { animation-delay: 1s; } #cf:hover img:nth-of-type(3) { animation-delay: 2s; } #cf img:nth-of-type(2), #cf img:nth-of-type(3) { opacity: 0; } @keyframes rotate-in-out { 16.5%, 33% { opacity: 1; } 49.5% { opacity: 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div id="cf"> <img class="top" src="http://lorempixel.com/200/200/nature/1" /> <img class="bottom" src="http://lorempixel.com/200/200/nature/2" /> <img class="third" src="http://lorempixel.com/200/200/nature/3" /> </div>