4 Ways to Apply Image Masking in Elementor - Custom CSS | Elementor Tips & Tricks скачать в хорошем качестве

4 Ways to Apply Image Masking in Elementor - Custom CSS | Elementor Tips & Tricks

► How to apply image masking in Elementor with icons, blob shapes and text? What is the Selector in Elementor Custom CSS? Useful free online tools and many other tips & tricks... ► Elementor Theme Builder Course from el mentor: https://links.el-mentor.com/elementor... #wordpress #elementor #tutorial ▬▬ About this Channel: ▬▬▬▬▬▬▬▬ Welcome to the YouTube channel of el mentor (https://el-mentor.com)! My name is Danijel. I am a WordPress trainer and Udemy instructor from Bad Tölz (Germany). On my YouTube channel you will find helpful tips and tricks about WordPress & Elementor Page Builder with focus on Performance and SEO. ▬▬ About this Tutorial: ▬▬▬▬▬▬▬▬ In this Elementor tutorial, you will see 4 different ways to mask your images in Elementor. You can use a Premium Addon but you can also implement image masking for free with Custom CSS. As a mask we will use a blob shape, icons, and transparent text. This tutorial is also available in German:    • Image Masking mit Custom CSS - Elementor C...   ▬▬ Table of Content: ▬▬▬▬▬▬▬▬ 1. Premium Elementor Addon for Image Masking - Happy Addons (01:27) 2. Image Masking for free with Custom CSS and Blob Shape (02:41) 3. Elementor Custom CSS - What is the selector? (05:00) 4. Image Masking for free with Custom CSS and Icons (08:00) 5. Image Masking with transparent text and hover effect (11:00) ▬▬ Helpful links from this tutorial: ▬▬▬▬▬▬▬▬ ► Crocoblock Templates: https://links.el-mentor.com/crocobloc... * ► Premium Elementor Addon for Image Masking: https://links.el-mentor.com/happy-addons * ► WordPress Theme in this tutorial: https://links.el-mentor.com/neve-pro * ► https://www.blobmaker.app/ ► https://nucleoapp.com/app/ ► https://thenounproject.com/ ► SVG Tutorial: http://tutorials.jenkov.com/svg/index... ► CSS Mask: https://developer.mozilla.org/de/docs... ► CSS background-clip: https://css-tricks.com/almanac/proper... ▬▬ CSS Code from this tutorial: ▬▬▬▬▬▬▬▬ CSS Code for the Blob Shape and the Icons: selector{ -webkit-mask: url(please enter your own url here); -webkit-mask-size: 88%; -webkit-mask-position: top center; -webkit-mask-repeat: no-repeat; mask: url(please enter your own url here); mask-size: 88%; mask-position: top center; mask-repeat: no-repeat; } CSS Code for the Text (Hover) Image Masking: selector .elementor-heading-title{ background: url("please enter your own url here"); background-position: 0 0; background-size: 80%; -webkit-background-clip: text; -moz-background-clip: text; -o-background-clip: text; background-clip: text; transition: background-position 1.5s; } selector .elementor-heading-title:hover{ background-position: 0 50%; } ▬▬ Thank you for your support: ▬▬▬▬▬▬▬▬ If you want to support me and my work and you are thinking about buying the following themes, plugins, or addons anyway, I would be very thankful if you could use one of the following affiliate partner links for the purchase: Best Elementor Addons: ► Elementor Pro: https://links.el-mentor.com/elementor... * ► Premium Addons: https://links.el-mentor.com/premium-a... * ► Crocoblock Plugins: https://links.el-mentor.com/crocoblock * ► Ultimate Addons for Elementor: https://links.el-mentor.com/ultimate-... * ► Happy Addons: https://links.el-mentor.com/happy-addons * Best Elementor Themes: ► Astra Pro: https://links.el-mentor.com/astra-pro * ► OceanWP: https://links.el-mentor.com/oceanwp-pro * ► GeneratePress: https://links.el-mentor.com/generatep... * ► Neve Pro: https://links.el-mentor.com/neve-pro * ► Kadence Pro: https://links.el-mentor.com/kadence-t... * Very Helpful WordPress Plugins: ► WP Rocket: https://links.el-mentor.com/wp-rocket * ► ShortPixel: https://links.el-mentor.com/shortpixel * Thank you very much for your support! ♥♥♥ ▬▬ More WordPress & Elementor Tutorials: ▬▬▬▬▬▬▬▬ ► https://el-mentor.com/elementor-tutor... ▬▬ About el mentor: ▬▬▬▬▬▬▬▬ ► Legal information: https://el-mentor.com/legal-information/ = Affiliate Partner Links