Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 14, 2019 at 12:50 am #1090472
    Munford

    HI
    I have a masonry gallery in the middle of the page below, with the titles at the bottom (default).
    I have a test page where I have the title and caption with a centered overlay that swap on hover using the code I found here: https://kriesi.at/support/topic/show-titel-on-masonry-gallery/#post-1068002.
    Is there a way to have the title with default display at the bottom without the overlay and then swap to center display with only caption on a dark transparent overlay?

    https://imgur.com/kUD7Rah > https://imgur.com/9ZV1SGI

    thanks for your help
    Nancy

    April 15, 2019 at 7:31 am #1090865
    Ismael

    Hey Munford,

    Thank you for using Enfold.

    You can use this css code to move the title at the bottom of the masonry container and have the caption overlay display as it is on hover.

    #top .av-fixed-size .av-masonry-entry.av-masonry-item-no-image .av-inner-masonry-content, #top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
    display: table;
    position: absolute;
    height: auto;
    width: 100%;
    bottom: 0;
    table-layout: fixed;
    background: #ffffff !important;
    color: #000000 !important;
}

#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content *, #top .av-caption-style-overlay .av-masonry-item-with-image ins:before, #top #wrap_all .av-caption-style-overlay .av-masonry-item-with-image del {
    color: #ffffff;
}

#top .av-fixed-size .av-masonry-entry.av-masonry-item-no-image:hover .av-inner-masonry-content, #top .av-caption-style-overlay .av-masonry-item-with-image:hover .av-inner-masonry-content {
    display: table;
    position: relative;
    height: 100%;
    width: 100%;
    bottom: 0;
    table-layout: fixed;
    background: rgba(0,0,0,.5) !important;
}

#top .av-caption-style-overlay .av-masonry-item-with-image:hover .av-inner-masonry-content *, #top .av-caption-style-overlay .av-masonry-item-with-image:hover ins:before, #top #wrap_all .av-caption-style-overlay .av-masonry-item-with-image del {
    color: #ffffff !important;
}

    Best regards,
    Ismael

    April 25, 2019 at 1:25 pm #1094397
    Munford

    Hej Ismael
    Thanks I worked it out with your code.

    • This reply was modified 5 years, 6 months ago by Munford.
    April 26, 2019 at 4:25 am #1094602
    Ismael

    Hi,

    Awesome! Glad that we could be of help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Masonry title at bottom + centered caption overlay’ is closed to new replies.