Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 7, 2025 at 5:10 pm #1480945
    sitadi

    Hi,

    Is it possible to add an overlay on a column that contains a photo in the background? I tried by adding a custom class “col-overlay-dark” in the column then the CSS below but it doesn’t work

    `/* Ajoute un overlay foncé à l’intérieur des colonnes ciblées */
    .col-overlay-dark {
    position: relative !important;
    overflow: hidden !important;
    }

    .col-overlay-dark::after {
    content: “” !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important; /* degré d’assombrissement */
    z-index: 1 !important;
    pointer-events: none !important;
    }

    Thank you in advance

    April 8, 2025 at 4:47 am #1480966
    Ismael

    Hey sitadi,

    Thank you for the inquiry.

    Would you mind providing a screenshot of the layout that you’re trying to create, and a link to a test page? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot.

    Best regards,
    Ismael

    April 8, 2025 at 7:46 am #1480980
    sitadi

    Hi Ismael,

    Thank you for your answer.
    Please find a screenshot :

    Best regards

    April 8, 2025 at 10:11 pm #1481026
    Guenni007

    see here an example page: https://webers-testseite.de/adamad/

    i use for it a color-section with custom class: slanted-background – let the content determine the height.
    this color-section contains the columns and is set with a svg-divider ( tilt ) – bring it back and maybe flip.

    the next color-section got the same color as the svg-divider

    then : 

    #top .slanted-background .avia-divider-svg-tilt.avia-divider-svg-bottom,
#top .slanted-background .avia-divider-svg-tilt.avia-divider-svg-bottom svg {
  height: 75% !important;
}
#top .slanted-background .flex_column img {
  box-shadow: 5px 5px 10px -3px #333;
}

    You can use the height setting (here 75%) to determine the degree of incline.

    April 11, 2025 at 8:11 pm #1481201
    sitadi

    I think you didn’t understand what I want to get: I want a darker overlay to be present in the photos so that the text written on the photos is more readable.
    When I added the code :

    .col-overlay-dark {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)) !important;
}

    background images disappear
    overlay
    Thank you in advance for your help

    • This reply was modified 1 week ago by sitadi.
    • This reply was modified 1 week ago by sitadi.
    • This reply was modified 1 week ago by sitadi.
    April 12, 2025 at 8:49 am #1481219
    Guenni007

    i would have made it with images inside the columns – and use the caption setting to have text over the image. In this case there will be an automatic overlay – – on image styling tab then you can set the options for that overly:

    April 12, 2025 at 9:04 am #1481220
    Guenni007

    if you need to do it that way with background-images in columns: give a custom-class to those columns f.e. : with-bg-overlay
    and use the psuedo-container before for that:

    #top .flex_column.with-bg-overlay::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
  visibility: visible;
  z-index: -1;
}

    see both variants again on: https://webers-testseite.de/adamad/
    PS there is a declaration with backdrop-filter – so you can blur the effect – but that is optional.

    PPS: see responsive behaviour on both cases !

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