Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1090472

    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

    #1090865

    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

    #1094397

    Hej Ismael
    Thanks I worked it out with your code.

    • This reply was modified 1 year, 2 months ago by  Munford.
    #1094602

    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

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

The topic ‘Masonry title at bottom + centered caption overlay’ is closed to new replies.