Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 7, 2022 at 3:11 am #1354342
    Ryan

    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

    June 8, 2022 at 4:14 am #1354466
    Ismael

    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

    June 8, 2022 at 11:17 am #1354505
    Guenni007

    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

    July 20, 2022 at 3:48 pm #1358902
    Ryan

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

    July 20, 2022 at 7:42 pm #1358944
    Rikard

    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

  • Author
    Posts
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.