Home Forums ART WordPress Theme Grid module with image+mask

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #25942
    andreisza6o
    Participant
    Purchased
    Supported

    Hello!
    I was wondering if there is a way in grid module when posts is the source of the grid, to have text over image like in “image+mask” but the title of the post to be seen before we crossover the mouse on the image, to be seen all the time on the image. It could be a good addition in my opinion.
    Thanks in advance!

    #25943
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    It is possible by custom CSS(“Appearance > Customize: Additional CSS”), like:

    .grid-item-con-text .grid-item-tit, 
    .grid-item-con-text .grid-item-cate, 
    .grid-item-con-text .grid-item-des, 
    .grid-item-con-text .grid-item-date {
        transform: scaleY(1);
    }
    .grid-item-con-text {
        opacity: 1;
    }

    If you want the CSS only affect one module, add the module unique ID, like:

    .module-id-1619508962612 .grid-item-con-text .grid-item-tit, 
    .module-id-1619508962612 .grid-item-con-text .grid-item-cate, 
    .module-id-1619508962612 .grid-item-con-text .grid-item-des, 
    .module-id-1619508962612 .grid-item-con-text .grid-item-date {
        transform: scaleY(1);
    }
    .module-id-1619508962612 .grid-item-con-text {
        opacity: 1;
    }

    Regards!
    SeaTheme – FAQsTwitterFacebook

    #25949
    andreisza6o
    Participant
    Purchased
    Supported

    magic! thanks!
    and just one more question: how can I make darker or whiter the image for making the text more visible? thanks!!

    #25953
    SeaTheme
    Keymaster
    Purchased
    Expired

    Welcome

    You can config the mask color as black or white for the Grid module. Set 10% for “Transparent for Mask”.


    Regards!
    SeaTheme – FAQsTwitterFacebook

    #25954
    andreisza6o
    Participant
    Purchased
    Supported

    I was wondering if the background can be darker without having to crossover the image with the cursor, as the text could be more readable.
    Thanks!

    #25955
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    1. Please config the Mask Color as black.

    2. Add custom CSS(“Appearance > Customize: Additional CSS”):

    .grid-item-con:after { 
        opacity: 0.3;
    }

    Regards!
    SeaTheme – FAQsTwitterFacebook

    #25956
    andreisza6o
    Participant
    Purchased
    Supported

    Amazing! Thanks!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!