Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 3, 2026 at 10:49 am #1493639
    spitsdesign

    I’m using the portfolio grid in a content section with dark background color. How do I remove the white squares behind the images and div grid content? I would like it to be transparent. Also when hovering the image a white square appears behind the rounded image. How do I remove this? The text in div grid content should be white. Also I would like tho add more spacing between the images.
    Thank you!

    January 4, 2026 at 8:11 am #1493641
    spitsdesign

    Can you help me?

    January 4, 2026 at 10:36 am #1493642
    Guenni007

    if you only want to get rid of that white overlay – but show on hover the little round icon – try:

    .avia_transform .avia-fullwidth-portfolio a .image-overlay {
  background-color: transparent !important;
  opacity: 1 !important;
}
.avia_transform .avia-fullwidth-portfolio a .image-overlay-inside {
  opacity: 0 !important;
}
.avia_transform .avia-fullwidth-portfolio a:hover .image-overlay-inside {
  opacity: 0.8 !important;
}
    January 4, 2026 at 10:44 am #1493643
    spitsdesign

    Thank you for your response.
    I added your code, nothing changed. So I removed it again.
    I copied all the ‘quick CSS’ in private content so you can see if maybe something is conflicting?

    Have a nice day

    January 4, 2026 at 10:47 am #1493644
    Guenni007

    for the bar under the images try:

    .avia_transform #top .avia-fullwidth-portfolio .grid-content,
.avia_transform #top .avia-fullwidth-portfolio .grid-entry-title,
.avia_transform #top .avia-fullwidth-portfolio .avia-arrow {
  background-color:  var(--enfold-main-color-primary) !important;   /* ==== or any color you like === */
} 

.avia_transform #top .avia-fullwidth-portfolio .grid-entry-title{
  color: #FFF
}
    January 4, 2026 at 10:49 am #1493645
    Guenni007

    sorry – no private content for me – i’m participant as you are.

    i thought it was your belgium site on spitsdesign
    PS: it is hard to inspect it with DEV Tools – because you merged the css.
    PPS: if you just use the minified Versions – this seems to be a better performance on modern browsers. – and it is easier to inspect.

    January 5, 2026 at 2:14 am #1493652
    Ismael

    Hi,

    Thank you for the inquiry.

    The white background is from the image overlay — adding this css code should remove it.

    .avia_transform a .image-overlay {
    background-color: transparent;
}

    Best regards,
    Ismael

    January 14, 2026 at 5:28 pm #1493914
    spitsdesign

    I’m using the portfolio grid on a dark background. How do I remove the white background from elements in the overview? Also how do I increase spacing in between the elements? I would like it to look like team page (see link in private content). How can I fix this?

    January 15, 2026 at 5:41 am #1493941
    Ismael

    Hi,

    Thank you for the update.

    You can add this css code to make the grid items transparent and add spaces between them.

    #top .grid-entry.av_one_fourth {
    width: 20%;
    margin-right: 5%;
}

#top .grid-entry .inner-entry {
    background-color: transparent;
}

#top .grid-entry .grid-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

    Let us know the result.

    Best regards,
    Ismael

    January 15, 2026 at 8:57 am #1493951
    spitsdesign

    Thank you for helping me out. It looks perfect! Now my client will review it.
    Have a nice day!

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