Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 16, 2021 at 5:21 pm #1300575
    Astaryne

    Hello
    I want to apply a blur effect in color section with image background.
    I try with css style, with dev > Custom CSS class, and with this css in my child css:

    .head_research_img {
	filter: blur(5px);
	-webkit-filter: blur(5px);
}

    But that blur all ! not only my background
    so I try with just
    backdrop-filter: blur(5px);
    but it doesn’t work either…
    what is the syntax with your frames?
    Thanks
    Seb

    • This topic was modified 3 years, 7 months ago by Nikko.
    May 17, 2021 at 5:24 pm #1300785
    Yigit

    Hey Seb,

    Thanks for contacting us!

    Please add your background image as Overlay under Styling tab of Color Section element and then go to Advanced > Developer Settings tab and give your Color Section a custom ID (“blurry-sec” in example below) and then add following code to bottom of Quick CSS field

    #blurry sec .av-section-color-overlay {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    background-size: cover;
}

    Regards,
    Yigit

    May 17, 2021 at 8:54 pm #1300810
    Astaryne

    Hi Yigit

    Perfect, Thank you !

    Regards
    Seb

    May 17, 2021 at 11:41 pm #1300833
    Nikko

    Hi Seb,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Apply blur effect in image full width’ is closed to new replies.