Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- You must be logged in to reply to this topic.
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
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.
Hi,
Thanks for helping out @guenni007 :-)
Did you try that and did you have any luck with it @condonp?
Best regards,
Rikard
Many thanks for all of this yes very pleased thanks
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;
}