Smooth CSS Cross-Fade Images

I am building a client website in an area where the competition tends to have websites that are visually quite bland and we’d like to do something better. I’ve done some photography for them, however both the client and I agree it needs some movement to stand out from the crowd.

What I’d like to do is have a laptop device fade in and then have a slideshow of still images automatically begin to play on the laptop screen. As a workaround I suppose I could create a video incorporating still images and set it to autoplay but I can see that having issues, especially with browsers blocking autoplay videos nowadays.

Does anybody know how this could be achieved?

I know there is a way of cross fading images with CSS. Which might be a good low overhead solution?

Possibly, but can it be done within a device, so it looks like the images are changing on the computer screen.

@Flashman one way to find out. My first guess is yes, it may take a little bit to get the css right. Here is an example.

https://codepen.io/johnbacon/pen/wgYOXW

2 Likes

Thanks I’ll give it a go.

1 Like

How did you go @Flashman

I couldn’t get this to work. I wonder if @Norm could include this as an option inside devices with 8.4? Ideally we’d be able to manually add a few images and just have them play as a slideshow inside a device.

1 Like

This Multiple Image Crossfade – CSS Only (https://codepen.io/johnbacon/pen/wgYOXW) is really cool!
Can there be Text over image and a Click-able or Hover-over hyperlink?
Is it possible to make this in Blocs 3 without adding the code? Maybe we could get @Eldar to check it out. By far the best on the work with code is @Pealco
If not, has anyone be able to get this to work?
Also will it work fluidly across various device?

Brilliant Smooth CSS Cross-Fade with no JS and Text Over Image!
No Hover or Clickable Hyperlink yet.

Hello @KBConcepts please try the following code:

<script type="text/javascript">

  window.addEventListener("DOMContentLoaded", function(e) {

    var stage = document.getElementById("stage");
    var fadeComplete = function(e) { stage.appendChild(arr[0]); };
    var arr = stage.getElementsByTagName("a");
    for(var i=0; i < arr.length; i++) {
      arr[i].addEventListener("animationend", fadeComplete, false);
    }

  }, false);

</script>

<div id="stage">
    <a href="http://home1.com"><img src="//placehold.it/450x280?text=Image 1" class=""></a>
    <a href="http://home2.com"><img src="//placehold.it/450x280?text=Image 2" class=""></a>
    <a href="http://home3.com"><img src="//placehold.it/450x280?text=Image 3" class=""></a>
    <a href="http://home4.com"><img src="//placehold.it/450x280?text=Image 4" class=""></a>
</div>

<style type="text/css">

  #stage {
    margin: 1em auto;
    width: 382px;
    height: 292px;
  }

  #stage a {
    position: absolute;
  }
  #stage a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

</style>

Try it and tell me if it worked…

1 Like

Again, I’m grateful for your willingness to help. I hope to get sometime tomorrow to work on this. I’m assuming I open to Page Editor and just paste it. :smile:

I just pasted the code into https://codepen.io/pen and #1 images show, but it does not fade to the others.

Also are these responsive Full Screen (Hero)? I asked because the js read 450x280.

Ah ok, have to change a little bit the code… working on the other request… tomorrow I take this one. Is it ok?

1 Like

Sounds good, thank you

Try this one, as this is responsive:

<div id="slide-container">
 <div id="slide-first-element">
  <img class="slide-image" src="https://via.placeholder.com/1500x1000.png?text=IMAGE_1">
  <p class="slide-text">Beautiful</p>
 </div>
 <div id="slide-element-2">
  <img class="slide-image" src="https://via.placeholder.com/1500x1000.png?text=IMAGE_2">
  <p class="slide-text">Amazing</p>
 </div>
 <div id="slide-element-3">
  <img class="slide-image" src="https://via.placeholder.com/1500x1000.png?text=IMAGE_3">
  <p class="slide-text">Incredible</p>
 </div>
</div>


<style>/* Slider */
/* Slideshow container */
#slide-container {
 position: relative;
 max-width: 100%; /* responsiveness */
}
/* First element to be in block mode for responsiveness */
#slide-first-element {
 display: block; /* to get the dimensions set */
 width: 100%;
 height: auto;
}
/* Other element to be in absolute position */
#slide-element-2,
#slide-element-3 {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}
/* Style images */
.slide-image {
 width: 100%;
 border-radius: 20px;
}
/* Style text */
.slide-text {
 position: absolute;
 bottom: 10px;
 background-color: #0042b1bb;
 color: white;
 width: 100%;
 text-align: center;
 font-size: 1.5rem;
}
/* Animation settings for individual elements */
/* For more images the animations have to be adjusted */
#slide-first-element {
 animation: fade-1 10s infinite;
 -webkit-animation: fade-1 10s infinite;
}
#slide-element-2 {
 animation: fade-2 10s infinite;
 -webkit-animation: fade-2 10s infinite;
}
#slide-element-3 {
 animation: fade-3 10s infinite;
 -webkit-animation: fade-3 10s infinite;
}
/* and more if there are more slides to show */
@keyframes fade-1 {
 0% { opacity: 1; }
 33% { opacity: 0; }
 66% { opacity: 0; }
 100% { opacity: 1; }
}
@keyframes fade-2 {
 0% { opacity: 0; }
 33% { opacity: 1; }
 66% { opacity: 0; }
 100% { opacity: 0; }
}
@keyframes fade-3 {
 0% { opacity: 0; }
 33% { opacity: 0; }
 66% { opacity: 1; }
 100% { opacity: 0; }
}
/* example for a 4th slide */
@keyframes fade-4 {
 0% { opacity: 0; }
 25% { opacity: 0; }
 50% { opacity: 0; }
 75% { opacity: 1; }
 100% { opacity: 0; }
}
</style>

Tell me if it works…

If you don’t mind paying, have a look at this:


Or this:
https://imageslidermaker.com/v2

Beautiful, my friend :smile:
Is this what controls how long the image stays in view?

#slide-first-element {
animation: fade-1 10s infinite;
-webkit-animation: fade-1 10s infinite;

Also how can I make the Blue background text line transparent, but the Text white ?

Those two links you showed me are really cool. Thanks so much for your help.

Hello,

Regarding times, you have to change in all slides…

#slide-first-element {
 animation: fade-1 10s infinite;
 -webkit-animation: fade-1 10s infinite;
}
#slide-element-2 {
 animation: fade-2 10s infinite;
 -webkit-animation: fade-2 10s infinite;
}
#slide-element-3 {
 animation: fade-3 10s infinite;
 -webkit-animation: fade-3 10s infinite;
}

About the text:
.slide-text
background-color: #0042b1bb (change blue to transparent)
color: white (change the color of the text itself)

1 Like

I know how busy you are @Pealco, so thanks for putting me at the top of your list. :smile:

1 Like