Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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,
    Sebastian

    #1172642

    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,
    Nikko

    #1172689

    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 1 month, 2 weeks ago by  Misantaller.
    #1173221

    Hi,

    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,
    Ismael

    #1173287

    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.
    Cheers,
    Sebastian

    #1173516

    Hi Sebastian,

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

    Best regards,
    Nikko

    #1173955

    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?
    Cheers

    #1174789

    Hi,

    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,
    Ismael

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

You must be logged in to reply to this topic.