Home Forums Art WordPress Theme Colour overlay on images in masonry grid

This topic contains 3 replies, has 2 voices, and was last updated by  SeaTheme 7 months, 1 week ago.

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

    thomashhaywood
    Participant
    Purchased

    Hello,

    For my homepage I am using a masonry grid with a colour overlay effect when scrolling over the image. It works fine on my mobile, but on a laptop and desktop the colour grid is larger than the image itself. It is stretched somehow. Is it possible to size it so that it matches the image?

    I also wonder if it is possible to have more control over the positioning and spacing of images on a masonry grid when having not many images and quite a bit of space between them?

    When I first go to my site the homepage url is;

    http://thomashaywood.co.uk/?doing_wp_cron=1554810233.2105379104614257812500

    Do you know why this might have happened?

    My site is;

    thomashaywood.co.uk

    Otherwise all is really good with your design.

    Thank you for your help,

    Thomas

    #18222

    SeaTheme
    Keymaster
    Purchased
    Supported

    Hi,

    The mask area will only fit the grid size because your page is set to image-fit-gird option, you should set the mask size manually, please enter the custom CSS(“Appearance > Customize: Additional CSS”):

    @media(min-width:768px) {
    .page-id-3569 .grid-stack .grid-item-con:hover:after { 
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
    .page-id-3569 .grid-stack div[data-postid="2583"].grid-stack-item .grid-item-con:hover:after {
      padding-top: 81.23%;
    }
    .page-id-3569 .grid-stack div[data-postid="2641"].grid-stack-item  .grid-item-con:hover:after {
      padding-top: 100%;
    }
    .page-id-3569 .grid-stack div[data-postid="2999"].grid-stack-item  .grid-item-con:hover:after {
      padding-top: 100%;
    }
    .page-id-3569 .grid-stack div[data-postid="3727"].grid-stack-item  .grid-item-con:hover:after {
      padding-top: 140.21%;
    }
    }

    Regards!
    Bwsm – uiueux.comTwitterFacebook

    #18236

    thomashhaywood
    Participant
    Purchased

    Hello,

    I copy and pasted the code where you suggested and it comes up with a number of warning errors;

    Expected IDENT at line 8, col 29.
    Expected RBRACE at line 10, col 23.
    Expected IDENT at line 10, col 29.
    Expected IDENT at line 15, col 29.
    Expected IDENT at line 19, col 29

    Not sure if I should go ahead and add the code?

    Thank you for your help,

    Thomas

    Thomas

    #18240

    SeaTheme
    Keymaster
    Purchased
    Supported

    Hi,

    I didn’t see the warning errors on my localhost.

    Please send your question(this topic URL) and wp-admin(URL / username/password) to uiueux@gmail.com, I’ll log in to check it.

    RG

Viewing 4 posts - 1 through 4 (of 4 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!