Revolutions slider image layer

This topic contains 4 replies, has 2 voices, and was last updated by  Sebastian 1 week, 4 days 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.

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!

You must login or register to reply to this topic.