Home Forums Fusion Picture – hoover on text

This topic contains 4 replies, has 2 voices, and was last updated by  Joshua 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #47524

    schneiders
    Participant

    Hi!

    I want to display text after hoover on a picture with elementor. Can you help me out?

    #47525

    Joshua
    Keymaster

    Sure. If you use the regular Elementor image widget and add a caption, you can add this to your CSS to put the caption on top of the image and only show when hovered:

    figcaption.widget-image-caption.wp-caption-text {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
    }
    .elementor-image {
        position: relative;
    }
    .elementor-image:hover .wp-caption-text {
        opacity: 1 !important;
    }
    #47530

    schneiders
    Participant

    Awesome! Thanks!

    #47532

    schneiders
    Participant

    I was just wondering what I am missing.

    I want to achieve on CERTAIN images hide on hover and show text.

    So I added `.elementor-image:hover img{
    opacity: 0 !important;` to your css.
    This of course makes all images disappear on hover. So I think I need to add a new class to the pictures I want to hide on hover and then also add this class on the code above.

    What exactly would the code then look like?

    #47534

    Joshua
    Keymaster

    You could make a new class:

    .hide-on-hover:hover img {
    opacity: 0 !important;
    }

    And then add this class ‘hide-on-hover’ to the elementor image widget.

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

You must be logged in to reply to this topic.