Thanks for posting in.

That is possible, the mixed of relative and absolute positioning. If you could provide the url with ready content, then I could give you the css that will do overlapping design without affecting other content.

Eg.

<div class="fix-size">
<div class="overlap-size">
Image or text with background.
</div>
</div>

.fix-size {
width: 50%;
height: 300px;
position: relative;
}
.overlap-size {
position: absolute;

/* overlap 20px on top */
top: -20px; 

/* overlap 20px on left */
left: -20px; 

/* overlap 20px on right */
right: -20px; 

/* overlap 20px on bottom */
bottom: -20px; 

}

Thanks!

Wow, nice work with overlapping and reflection effect!

Add this css at your customizer’s custom css.

@media (min-width: 980px) {
.prompt-overlap-top {
margin-top: -50px;
z-index: 99;
position: relative;
}
}

Then edit your prompt shortcode under your slider and add prompt-overlap-top on its class attribute.

Eg. [prompt .... class="prompt-overlap-top"]

Cheers!

.x-prompt-section.x-prompt-section-button {
display: none;

}

but now, is there any way to center the text? Bear in mind, I want to do this just for this one page, not globally. *(so I did the CSS on the one page)

You can create another class name that you can use for specific prompt.

.x-prompt-no-button .x-prompt-section-message {
text-align: center;
width: 100%;
}

.x-prompt-no-button  .x-prompt-section-button {
display: none;
}

The use that class name just like this [prompt class="x-prompt-no-button"]

Cheers!