Revolutions slider image layer

This topic contains 11 replies, has 2 voices, and was last updated by  Sebastian 1 month, 3 weeks ago.

Author Posts

Martin_1

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

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

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

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

Excellent!


Martin_1

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

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

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

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

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

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

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.