Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 23, 2024 at 11:49 am #1445322
    condonp

    Dear Sirs,

    I have a site at peter-test1.co.uk on the third row of images down I am using the image slider. I want to darken some of the images to make the writing stand out more especially in “Read Our Journal” and ‘Shop Our Eyewear Collection”. Can you please help

    Many thanks
    Pete

    May 23, 2024 at 2:29 pm #1445361
    Guenni007

    this is one idea – 

    #top.page-id-102 #av_section_1 .flex_column img {
  filter: brightness(0.5)
}

    or with two filters and hover effect:

    #top.page-id-102 #av_section_1 .flex_column img {
  -webkit-filter: brightness(0.6) blur(3px);
  filter: brightness(0.6) blur(3px);
  transition: filter 1s ease;
}

#top.page-id-102 #av_section_1 .flex_column:hover img {
  -webkit-filter: brightness(0.8) blur(0.5px);
  filter: brightness(0.8) blur(0.5px);
  transition: filter 1s ease;
}

    but maybe you like a frosted glass effect behind your caption:

    
/***** here only for those images inside column 4,5 and 6 *****/
#top.page-id-102 #av_section_1 .flex_column:nth-of-type(n+4) .av-slideshow-caption {
  border-radius: 10px;
  background-color: rgba(0,0,0,0.3);
  width: calc(100% - 34px);
  margin: 0 auto !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}


    if     you change your font color to black then switch to a white frosted glas ;)

    btw: it seems to be better if you switch to single rows on 990px for that color section.

    May 23, 2024 at 3:25 pm #1445372
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Did you try that and did you have any luck with it @condonp?

    Best regards,
    Rikard

    May 25, 2024 at 7:09 am #1445831
    condonp

    Many thanks for all of this yes very pleased thanks

    May 25, 2024 at 8:12 am #1445850
    Guenni007

    i would prefer this solution:

    #top.page-id-102 #av_section_1 .flex_column img {
  -webkit-filter: brightness(0.6) blur(3px);
  filter: brightness(0.6) blur(3px);
  transition: filter 1s ease;
}

#top.page-id-102 #av_section_1 .flex_column:hover img {
  -webkit-filter: brightness(0.8) blur(0px);
  filter: brightness(0.8) blur(0px);
  transition: filter 1s ease;
}
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.