How to Use CSS Filters With Elementor | Elementor Resources 12611872352923
How to Use CSS Filters With Elementor

How to Use CSS Filters With Elementor

Editing images using Photo Editing Software like Photoshop can be a tedious process, especially if you’re working on numerous files. As such, it’s better to have a single image and just apply “filters” on it whenever possible.

As you’re seeing in this GIF, that’s what we’re gonna show in this tutorial!

grow_on_hover_tutorial_0

You’ll be able to learn using CSS filters and apply image overlays on your photos in real time without having to upload images redundantly.

Let’s get started!

Step 1: On your Elementor designer, drag the “image widget” on the “draw widget here” area.

css-filters-tutorial-1

Step 2: Click the image widget you’ve just dragged, and on the left sidebar, choose your image file.

css-filters-tutorial-2

Step 3: On the left sidebar again, go to the Style tab and click the “CSS Filters” option.

css-filters-tutorial-3

css-filters-tutorial-4

Step 4: This will prompt a popup window which will allow you to add/edit the image filter in the way you wanted! Then click “Update” if you’re done!

css-filters-tutorial-5

Step 5: After choosing an image, first head to the “Normal” tab. Adjust the image filter in the way you want it to be when it it not hovered.

css-filters-tutorial-6

Step 6: For this example, I want to make the image brightness back to its original value (which is “100”) when hovered, so in its normal state, I changed the value to “30”.

css-filters-tutorial-7

Step 7: Then head to the hover tab, click on the CSS Filters, and adjust the image brightness back to its original value which is “100”. You can manipulate the value of the “Transition Duration” so it will have a “delay” effect when the image changes its brightness from 30 to 100. Then click “Update” and you’re done!!

css-filters-tutorial-8

css-filters-tutorial-9

Now we’re done! Just replicate the same procedure to your sections and you’d be designing like the best!

Thanks for Reaching This Far! 🙂

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

Leave a Reply

×
×

Cart