Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1172550

    Hi there,
    I know there have been tons of threads on this question. But can i place a button over an image? I don’t want to set the image as background for my color section, because then I can’t add the slide-in animation which I can easily do with images.
    Best regards,


    Hey Misantaller,

    Are you referring on the images with instagram icon when hovered below ‘BE PART OF OUR JOURNEY’?
    It can be done through some css, try to do the following:
    – In the Color Section, go to Developer (tab) and on Custom CSS Class, put my-section.
    – In Enfold > General Styling > Quick CSS, add this CSS code:

    .my-section .avia-button-wrap {
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -19px;
        text-align: center;
        width: 100%;
    .my-section .avia-button {
        display: inline-block;

    Hope it helps.

    Best regards,


    Hi Nikko,
    Thanks for your help, but it didn’t change anything…And i think you’re reffering to the wrong part of the page.
    I’m talking about this part and the button:

    View post on imgur.com

    The image and the text slide in and there is the button saying “Termin sichern” (which even changes it’s color on hover).

    Is there any way to easily do sth. like that?

    Best regards

    • This reply was modified 9 months, 2 weeks ago by  Misantaller.


    Thank you for the clarification.

    You can use columns to separate the image and the button, edit the column containing the button, apply a custom css class attribute to it (e.g custom-column-button-class), then use this attribute to adjust the style of the column. You can pull the button column towards the image by applying a negative left margin value to it.

    .custom-column-button-class {
       margin-left: -300px;

    // https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,


    Hi i added a name to the buttons title attribute (same as a class?) and tried to alter it in the quick css field in the customizer.
    But it didn’t change at all. On no command. I think i didn’t call it correctly, although i followed your instructions.


    Hi Sebastian,

    You’re just missing the button where you’ll need to apply a custom CSS class attribute.

    Best regards,


    Hi Nikko,
    The button is on the correct place now, but i can only see it in my chrome browser. Not in firefox, or my mobile phone…
    Can you help me fix that?



    Thank you for the update.

    We can now see the button above the image on Firefox Windows 10. It looks fine on desktop, but you have to adjust it on mobile view or on smaller screens. You can also just apply the modification when the screen width is wider than 1024px.

    @media only screen and (min-width: 1024px) {
      /* Add your Desktop Styles here */

    Best regards,

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.