Cross Fade Background images

How To
1

Is there a way to create a simple container backround image scossfade. Like in this header: https://iconisd.sg-host.com/

it’s basically a background presentation in Elementor with a simple text on top of it. I was wondering how to do it in Bricks.

2

Something like this? Or what exactly are you looking for?

CleanShot 2023-02-16 at 20.41.42@2x
CleanShot 2023-02-16 at 20.41.42@2x742×1290 41.8 KB

1 Like
3

Thanks for replying. I was looking for a way to add multiple images in to a background container. The images need to animate, fade in and out. Then add text to that container. It’s like a slider but only the images slide but the text stays the same.

4

Just a thought. Can you do a image only slider and have a separate text layer that is absolute positioned over it?

You could also overlap them with css grid.

1 Like
5

Oh I see. Then I’d do it like @cmstew recommended.

In your elementor example it is also a slider that is used for this btw…

CleanShot 2023-02-17 at 08.03.31@2x
CleanShot 2023-02-17 at 08.03.31@2x858×180 29.4 KB

1 Like
6

I tried, it looks really funky and I can’t make it look ok at all. Might try the grid tho…Thank you.

7

Just a quick demo: https://bricks.andreslotta.dev/image-slider/.

1 Like
8

Thank you so much, I’ll try it.

9

Hello,
unfortunately I can not open the quick demo, because of a certificate error on your page.
Could you please update it. I would very like to look at the demo example.

Kind regards
Alex

10

Hello, Is there a tutorial on how to use a sequence of images as a background of a container which are then displayed one after the other with a fine fade in behind a text content ?

Kind regards
Alex

11

I’m also interested in this. Is there some walk through available?
Section several image background slider.

12

Me too looking for this feature, I had to get a premium plugin to make this work, but is bugged, so any other solution?

13

You could do it as follows:
image_slider_structure

Then make following settings:
Container -Element

  • set position to relative

Slider -Element

  • add slides
  • foreach slide remove button and content and add image as background
  • Slider-Settings : effect: fade, animation speed in ms: 4000, enable autoplay

Text-Element

  • add the following to the css-panel
%root% {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:1;
}

All the best!

2 Likes
14

thanks, for the info. And if you want zoom in effect on slide add this css:

.image {
  width: 100%;
  animation: move 40s ease;
  /* Add infinite to loop. */
  
  -ms-animation: move 40s ease;
  -webkit-animation: move 40s ease;
  -0-animation: move 40s ease;
  -moz-animation: move 40s ease;
  position: absolute;
}

@-webkit-keyframes move {
  0% {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    /* IE 9 */
    
    -webkit-transform: scale(1.0);
    /* Safari and Chrome */
    
    -o-transform: scale(1.0);
    /* Opera */
    
    -moz-transform: scale(1.0);
    /* Firefox */
  }
  100% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    /* IE 9 */
    
    -webkit-transform: scale(1.2);
    /* Safari and Chrome */
    
    -o-transform: scale(1.2);
    /* Opera */
    
    -moz-transform: scale(1.2);
    /* Firefox */
  }
}