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

    Hello,

    I would like to make 2 customizations to my masonry gallery:

    Reduce the overlay opacity before the hover
    Have the title display before hover and the text “Learn more” display after hover

    is this possible?

    Thanks,
    Ryan

    #1354466

    Hey Ryan,

    Thank you for the inquiry.

    Set the Content > Captions > Element Title and Excerpt display settings to “Always Display”, and add this code in the functions.php file to append the “learn more” text to the caption.

    add_filter("avf_masonry_entry_content", function($content, $entry, $atts) {
    
    	$length = 16;
    	$more = "… <span class='avia-button avia-size-small av-masonry-learn-more'>Learn more</span>";
    	$content = wp_trim_words($content, $length, $more);
    
        return $content;
    }, 10, 3);
    

    You can then use this css code to hide the learn more text initially and only display it on hover.

    .av-masonry-learn-more { 
       opacity: 0;
       transition: all 0.8s;
    }
    
    .av-masonry-entry:hover .av-masonry-learn-more {
       opacity: 1;
    }

    Best regards,
    Ismael

    #1354505

    do you realy mean a masonry gallery? What should be learned from an opened image? Or do you have custom links on the images?

    Anyway – it will work on masonry too:

    i tried this:
    ( and because all classes on buttons do have avia-… i switched ismaels class to : avia-masonry-learn-more )
    to have this in a translatable “Learn more” phrase i put in that too

    add_filter("avf_masonry_entry_content", function($content, $entry, $atts) {
      $content .= " <span class='avia-button avia-size-small avia-color-theme-color avia-masonry-learn-more'>". __( 'Learn more', 'avia_framework' ) . "</span>";
      return $content;
    }, 10, 3);
    .avia-masonry-learn-more { 
      opacity: 0;
      transition: all 0.8s;
    }
    .av-masonry-entry:hover .avia-masonry-learn-more {
      opacity: 1;
    }

    i don’t know why the wp_trim_words( ) does not work

    #1358902

    Thank you for the proposed solutions. You can close this thread out, I no longer need to implement this feature.

    #1358944

    Hi,

    Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘reducing the overlay opacity and adding hover text to the masonry gallery’ is closed to new replies.