Revolutions slider image layer

Author Posts

Martin_1 July 8, 2019 at 4:49 pm

Hi,

I use Revolution slider and added a background color and a layer that holds an image. Now I want the image to move down a bit using css so it falls just a bit below the slider itself.

I moved it down with a bit of top margin. But it’s constricted by the height of the div the slider is in.

So I tried another work around. I removed the background color from the settings in the Revolution slider and added it myself with css and adjusted the overall height of the slider so the image stays within the div. But I now obviously need to limit the background color height so it doesn’t fill the entire div. I added a 50% height to it. But to no avail.

https://www.wintherbikes.com/

I think I am overthinking this and need help :-D.

Regards,

Martin

Martin_1 July 10, 2019 at 11:04 am

Just to clarify a bit more what I mean. I am trying to achieve the same result with the image as in this picture.

Example

Sebastian July 10, 2019 at 12:21 pm

Hi Martin,

Sorry I missed your initial message yesterday!

The image was being cropped because two containing elements had overflow: hidden. I was able to create the following design by setting overflow: visible on those elements:

.tp-revslider-mainul,
.tp-revslider-mainul > li {
	overflow:visible
}

Overflow issue

If you want the right hand edge flush you could target the image and set margin-left:-62px and/or reduce the width image.

The overflow:hidden settings might be necessary for revolution slider to function properly however. I wasn’t able to tell for sure because there is only one image on the example page.

Cheers,
Sebastian

Martin_1 July 10, 2019 at 3:00 pm

Hi Sebastian,

The

.tp-revslider-mainul,
.tp-revslider-mainul > li {
overflow:visible
}

did the trick!

I added this as well

.tp-caption img {
margin-top: 64px;
}

and placed the images (I have now two slides in the rev slider) somewhat neatly aligned at the edge of the slider.

Now the images are like in the example picture of my previous post :-D.

Thanks for the help!

You rock \m/

Sebastian July 10, 2019 at 3:06 pm

Excellent!

Martin_1 July 23, 2019 at 3:26 pm

H Sebastian,

I am need of your help again in regards to this. After the latest update of the Revolution slider their code appearantly changed.

Instead of:

.tp-caption img {
margin-top: 64px;
}

which no longer has any effect.

I now need to use:
.rs-layer img {
margin-top: 64px;
}

But your excellent solution:

.tp-revslider-mainul,
.tp-revslider-mainul > li {
overflow:visible
}

also no longer works and for the life of me I can’t seem to find out what to target so can I get it to work again.

Any help is appreciated.

Sebastian July 23, 2019 at 5:06 pm

Hey Martin,

It looks like Revolution Slider has started using Custom Web Components, with quite different HTML and classes. I think you should be able to recreate the effect by replacing the selector I suggested previously with the following: 

rs-module,
rs-slides {
overflow:visible
}

Cheers,
Sebastian

Martin_1 July 24, 2019 at 11:58 am

Hi Sebastian,

That didn’t work unfortunatly.

I added this to the custom css

rs-module,
rs-slides {
overflow:visible
}
.rs-layer img {
margin-top: 64px;
}

The overflow is just not there. Isn’t that weird?

Do you have any other suggestions?

Sebastian July 24, 2019 at 4:20 pm

Ah I see RS is adding some inline CSS styles. Could you try setting !important to override them?

rs-module,
rs-slides {
overflow: visible !important;
}

Please let me know if that works.

Thanks,
Sebastian


Martin_1 July 25, 2019 at 12:54 pm

Hi,

Nope still no luck. I had tried that myself as well but just to make sure I copied your code and tried it again. Isn’t this weird? Darn annoying they changed so much in Rev slider.

Do you want to have some login info to try it in Microthemer? Would that help?

Martin_1 July 25, 2019 at 3:31 pm

Found it! I asked in the Avada Facebook group and there someone noticed that the:

rs-slide has a visible hidden.

I now have:

rs-module,
rs-slides
rs-slide {
overflow: visible !important;
}
.rs-layer img {
margin-top: 64px;
}

:-D. #happyyyy

Sebastian July 25, 2019 at 5:22 pm

Ah, well done!

I must have disabled the rs-slide overflow:hidden rule when playing around with Chrome dev tools but forgotten that step when explaining the style rules to you. Sorry about that, I’m glad you got there in end though!

Sebastian

You must login or register to reply to this topic.