Elementor Hover To Change Container Background Image | WordPress Elementor Tutorial (Tips & Tricks)

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ก.ย. 2024

ความคิดเห็น • 98

  • @warrior7862
    @warrior7862 ปีที่แล้ว +7

    One of the best tutorial ❤ thanks bro it will help us alot

  • @MatthewLaFreak
    @MatthewLaFreak 18 วันที่ผ่านมา

    Worked like a charm my Indigga, love you so much!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • @feckitproductions8950
    @feckitproductions8950 ปีที่แล้ว +3

    OUTSTANDING! Just another video showcasing why you are the best. Thank you, Jim.

  • @mikeoftheclandobson5483
    @mikeoftheclandobson5483 หลายเดือนก่อน

    Excellent video, simple and easy to follow. Many thanks

  • @julianamokrejs6198
    @julianamokrejs6198 5 หลายเดือนก่อน +1

    a life saver, thanks a lot from Brazil!

  • @1ssphenix
    @1ssphenix ปีที่แล้ว

    I am from Brazil. This content is very precious! Thank you very much. I wish you much success always.

  • @antextra300
    @antextra300 11 หลายเดือนก่อน

    Amazing stuff! I won't be able to sleep tonight! Too many ideas running in my head. THANK YOU!! I just subscribed, gonna go watch more of your videos. And gonna buy Elementor Pro now, I'll use your affiliate link! Great content!

  • @emilychiang5688
    @emilychiang5688 ปีที่แล้ว +1

    Thank you very much! I just follow all steps and it works. I love your way to explain the code. very easy to understand. Thank you !

  • @fahadmehmood6696
    @fahadmehmood6696 9 หลายเดือนก่อน

    I have no words to say thank you buddy; Highly Great Job 👍

  • @yangnolan3910
    @yangnolan3910 ปีที่แล้ว +1

    After all the processes are done, the background image is not replaced

  • @rabbyhossain.27
    @rabbyhossain.27 ปีที่แล้ว +1

    I want from you a video about how to make a filterable section with a load more button for the portfolio section. So that we can customize our portfolio section. Thanks a lot again, man.

  • @NataniaCory
    @NataniaCory 11 หลายเดือนก่อน

    I love all your stuff! You've helped me so much! Thank you!

    • @jimfahaddigital
      @jimfahaddigital  11 หลายเดือนก่อน

      Happy to help! Thanks a million!! 😍

  • @stanleyd777
    @stanleyd777 11 หลายเดือนก่อน

    Bless you, Jim! Just what I am looking for! ❤

  • @alvarez958
    @alvarez958 ปีที่แล้ว

    As always !!!! YOU ARE REALLY SPECIAL JIM.

  • @advanced-developers
    @advanced-developers ปีที่แล้ว

    I like the way you explain how code is working. Thanks

  • @zakariakhan4961
    @zakariakhan4961 ปีที่แล้ว

    i always learning new objects to watch your tutorials 💌

  • @gustavonascimento2511
    @gustavonascimento2511 2 หลายเดือนก่อน

    amazing widget

  • @healingzen338
    @healingzen338 ปีที่แล้ว

    Wow! Fantastic work Fahad.

  • @faisalfarid851
    @faisalfarid851 ปีที่แล้ว

    You are awesome my brother ❤️❤️❤️👏👏👏

  • @snifferx5002
    @snifferx5002 10 หลายเดือนก่อน +1

    Great video Sir, can You please tell mi if we can use video as a background instead of images, in other words to transition from image to video on hover. Please?

  • @vesir4553
    @vesir4553 5 หลายเดือนก่อน

    Love the intro!

  • @BominFit
    @BominFit 22 วันที่ผ่านมา

    nice

  • @__al-uf5oe
    @__al-uf5oe ปีที่แล้ว

    Mashaallah good content with good teacher plz can u make how sections can be good with phone sizes

  • @Rqieee
    @Rqieee ปีที่แล้ว

    Amazing tutorial 👍👍👍👍, thanks

  • @fernellie0997
    @fernellie0997 5 หลายเดือนก่อน

    Thank you!! How about the code for setting a variable for a color hexcode then changing a heading color when hovered?

  • @vinaymore44
    @vinaymore44 2 หลายเดือนก่อน +1

    we can achive this using only css also..

  • @MuhammadIrfan-qw6zu
    @MuhammadIrfan-qw6zu 4 หลายเดือนก่อน

    Very Nice ❤

  • @ayoubchakri7555
    @ayoubchakri7555 6 หลายเดือนก่อน

    THANK YOU SO MUCH

  • @pantelisalexo
    @pantelisalexo 4 หลายเดือนก่อน

    Awesome! Great job! I make it work on mobile also with overflow! But there is a problem and i'ts not only in mobile but all over the section.. there is a 1.5s delay when you hover a container.. can someone help with this? or can someone help how can we make this script run on page load and not on the section when you hover. I try it also with preload cache but doesn't work either.. Thanks in advance!. P.S works on mobile also!

  • @abbasbasheer4352
    @abbasbasheer4352 6 หลายเดือนก่อน

    it would have been more better if you also guided about the precautions.
    my whole site was based on this feature and at the mean delivery time its not working and i have done no changes to it.

  • @priyajitsamanta
    @priyajitsamanta ปีที่แล้ว

    Wonderful 😊

  • @afsarali-pe7pw
    @afsarali-pe7pw 5 หลายเดือนก่อน

    Thank you

  • @srancuric7709
    @srancuric7709 ปีที่แล้ว

    Hello, your tutorials are awesome. Yes but in the future one about custom Mouse Cursors in Elementor. Something with hove mouse effect... Thanks! :)

  • @heberlucero5032
    @heberlucero5032 หลายเดือนก่อน

    Hi! Does anyone know how to set up the transition or fade between images when hovering the cursor? It changes abruptly for me.

  • @Eattercat
    @Eattercat ปีที่แล้ว

    thanks for teaching It's very useful. But may I ask, my elementor doesn't have a widget container? What should I do?

  • @tamratteshome2001
    @tamratteshome2001 ปีที่แล้ว

    very attractive

  • @Lufimusicindia
    @Lufimusicindia หลายเดือนก่อน

    Instead of js , we can do it using css in Brizy

  • @gladiadoraxe3795
    @gladiadoraxe3795 11 หลายเดือนก่อน

    Jim, can we have a different image for each column, and a fourth image one for the general background (or maybe even a background video)?
    So, no defaulting on the third column. Th general background could be neutral not putting emphasis on any of the columns..

  • @davidphilip7859
    @davidphilip7859 ปีที่แล้ว

    Hello, thanks for the amazing video. I added 3 inner containers and everything worked fine - the first and second animations, but when I added five inner containers none of the animations worked. Please help. Thanks.

  • @HamidTalebiht
    @HamidTalebiht ปีที่แล้ว

    Great 👍

  • @Fatima-gh5um
    @Fatima-gh5um ปีที่แล้ว

    Sir please make a tutorial how to create a website using elementor grid layout

  • @NKartline-z3w
    @NKartline-z3w 10 หลายเดือนก่อน

    I pasted CSS from your link but my WP Custom CSS still no run. How I resovle that problem

  • @AdvancedBioTechnologyProducts
    @AdvancedBioTechnologyProducts ปีที่แล้ว +3

    Quick question (aside from having to tell you this is awesome!). Can you also apply it to a container instead of the regular text? And is it possible to slow down the transition between the background images? would love to see how that's done

  • @hellboy8317
    @hellboy8317 ปีที่แล้ว

    Dear Jim. This looks very awesome, thank you so much. I got a little problem. When I insert the JS snippet and click to save, I got instantly a server error message "510". I just copied your entire code, but also tried with image urls from my server. Any idea ? Best regards from Switzerland

    • @hunaldoaraujo
      @hunaldoaraujo ปีที่แล้ว

      The same thing is happening to my website.

  • @EliKO_109
    @EliKO_109 ปีที่แล้ว +1

    Great Tutorial! Is there a way to inject the changing pictures dynamically with the loop builder or with JetEngine? perhaps instead of a url to insert a shortcode?

    • @wandersoulwebdesign
      @wandersoulwebdesign ปีที่แล้ว +1

      Was wondering the same thing!

    • @EliKO_109
      @EliKO_109 ปีที่แล้ว

      @@wandersoulwebdesign let me know if you figured it out 😅

  • @raminify
    @raminify หลายเดือนก่อน

    where css code

  • @gladiator425
    @gladiator425 ปีที่แล้ว

    I used . thank you verymuch I like it dude

  • @arsalanayyyy
    @arsalanayyyy ปีที่แล้ว +1

    If any body wants Elementor pro in 8$ just comment below

    • @jimfahaddigital
      @jimfahaddigital  ปีที่แล้ว +1

      If you scam like this, you'll get banned! :)

    • @arsalanayyyy
      @arsalanayyyy ปีที่แล้ว

      @@jimfahaddigital who said I'll do scam ? 🙄

    • @jimfahaddigital
      @jimfahaddigital  ปีที่แล้ว

      @@arsalanayyyy Reselling Elementor Pro is completely illegal.

    • @arsalanayyyy
      @arsalanayyyy ปีที่แล้ว

      @@jimfahaddigital then send me elementor pro updated version free of cost.

    • @jimfahaddigital
      @jimfahaddigital  ปีที่แล้ว +2

      ​@@arsalanayyyy Why? Why do you want a paid product for free? Go to restaurant, ask for pizza & burger for free, will they give you that?
      BTW, Elementor has a FREE version if someone can't afford the Pro version.
      Now please don't say you don't have budget for that. You're writing it from your Phone/PC. You had to purchase that, similarly you need to invest on paid products! Thanks!

  • @joharamohammad4139
    @joharamohammad4139 5 หลายเดือนก่อน

    You are so fast 😢 and some steps cant find it

  • @chorzyy
    @chorzyy 2 วันที่ผ่านมา

    There's anybody have code on this one? without the jquery

  • @calebncontreras-117
    @calebncontreras-117 ปีที่แล้ว +1

    First off, why is your interface so fast. Shouldn't it take like 2.5-3 seconds to apply a change?

  • @wandersoulwebdesign
    @wandersoulwebdesign ปีที่แล้ว +1

    Great tutorial! Is it possible to do this on click, instead of on hover?

    • @TM4CHII
      @TM4CHII 10 หลายเดือนก่อน

      Yes, if I remember rightly you would simple change the JavaScript code to .active instead of .hover

  • @HimanshuSingh088
    @HimanshuSingh088 ปีที่แล้ว

    Jim Fahad Digital - Hi, Can you please tell me how to stop The jQuery from taking place on mobile devices, because pictures are not fitting. How to stop, Please let me know. Thanks

  • @zerocool1384
    @zerocool1384 6 หลายเดือนก่อน

    Hey Jim can we do this with Elementor Free ?

  • @tamratteshome2001
    @tamratteshome2001 ปีที่แล้ว +1

    please buy elementor pro and give me as a gift cause there is no way of buying online products from my country

  • @abgupta007
    @abgupta007 2 หลายเดือนก่อน

    Esko slider me kaise kru

  • @CrazyCatLadyInTech
    @CrazyCatLadyInTech 3 หลายเดือนก่อน

    Hi! Great video as usual! May I ask you if it's possibile to play a "hidden" video on hover instead of an immage? I would really like to know how! Thanks!

  • @GasserMamdouh
    @GasserMamdouh ปีที่แล้ว +1

    Man I just follow all your steps and it works easily, you explain the code like a dream🤩..Thank you very much.

    • @jimfahaddigital
      @jimfahaddigital  ปีที่แล้ว

      Great to hear! Thank you so muchh!!! 😍🔥

  • @gladiadoraxe3795
    @gladiadoraxe3795 11 หลายเดือนก่อน

    @Jim When using a video or an elementor gallery for the default background, none of the images associated with hovering over the nested containers show up. How can I solve it? Please help!

  • @alanmartinezbrito
    @alanmartinezbrito 8 หลายเดือนก่อน

    Great tutorial Jim. One question please, how can I define the duration of the transition between images? In my site, it just happening instantly without fade.

  • @rasgsg3999
    @rasgsg3999 หลายเดือนก่อน

    AMAZING TUTORIAL, Thanks bro

  • @rafaeln.castrom.6453
    @rafaeln.castrom.6453 ปีที่แล้ว

    OMG 🤯🤯🤯🤯🤯 i do love tips n tricks.!! a lot
    amazing man.!! thanks.!!!

  • @petermarhula9544
    @petermarhula9544 ปีที่แล้ว

    awesome tutorial. would it be possible to make a grid of 3 containers and 2 rows, so basically 6 containers?

  • @aaronneilson-belman5035
    @aaronneilson-belman5035 11 หลายเดือนก่อน

    Hi, great tutorial! How can you apply a no-repeat and background size property to the background image?

  • @GTXnihboss
    @GTXnihboss ปีที่แล้ว

    Bro , please tutorial preloader animation custom with GIF

  • @hasanmahmud2461
    @hasanmahmud2461 5 หลายเดือนก่อน

    You said no need code but you uses every videos css Code 😅😅

  • @catsdogshub8499
    @catsdogshub8499 ปีที่แล้ว

    hello,i want to create a short code for this how can i do can you kindly tell me.

  • @cotizatuobra
    @cotizatuobra ปีที่แล้ว

    Thank you Jim!! Cheers from Argentina.

  • @bakoline
    @bakoline ปีที่แล้ว

    You forgot to show how image switching works on a mobile...

  • @bindutagore
    @bindutagore ปีที่แล้ว

    hi jim i like ur videos very informative thank u

  • @adied7725
    @adied7725 ปีที่แล้ว

    how to add bg video on hover?, please

  • @aliplays5893
    @aliplays5893 11 หลายเดือนก่อน

    Great u just explained it easily

  • @thinktechllc8667
    @thinktechllc8667 ปีที่แล้ว

    thank you soo much
    God bless you

  • @Ashu_edits99
    @Ashu_edits99 ปีที่แล้ว

    How to hide the html container

  • @almahmud1834
    @almahmud1834 ปีที่แล้ว

    another great tutorial ☺️🫡🫡

  • @susangemayel-tapper3794
    @susangemayel-tapper3794 ปีที่แล้ว

    Thanks for sharing.

  • @bencetakats884
    @bencetakats884 ปีที่แล้ว

    you are awesome 😁

  • @becomingweb5222
    @becomingweb5222 7 หลายเดือนก่อน

    Thanks!!!

  • @learnearn3166
    @learnearn3166 ปีที่แล้ว

    Very nice

  • @dandyazhar3821
    @dandyazhar3821 5 หลายเดือนก่อน

    daaaaaaaaang