Home › Forums › ART WordPress Theme › Colour overlay on images in masonry grid

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 9, 2019 at 11:46 am #18207
    thomashhaywood
    Participant
    Purchased
    Expired

    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

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    April 10, 2019 at 2:35 am #18222
    SeaTheme
    Keymaster
    Purchased
    Expired

    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.com – Twitter – Facebook

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    April 10, 2019 at 12:35 pm #18236
    thomashhaywood
    Participant
    Purchased
    Expired

    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

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    April 11, 2019 at 1:37 am #18240
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

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