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

Поделиться
HTML-код
  • Опубликовано: 4 янв 2025

Комментарии • 109

  • @warrior7862
    @warrior7862 Год назад +7

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

  • @julianamokrejs6198
    @julianamokrejs6198 9 месяцев назад +1

    a life saver, thanks a lot from Brazil!

  • @feckitproductions8950
    @feckitproductions8950 Год назад +3

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

  • @MatthewLaFreak
    @MatthewLaFreak 3 месяца назад

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

  • @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.

  • @1ssphenix
    @1ssphenix Год назад

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

  • @antextra300
    @antextra300 Год назад

    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!

  • @fahadmehmood6696
    @fahadmehmood6696 Год назад

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

  • @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 !

  • @mikeoftheclandobson5483
    @mikeoftheclandobson5483 5 месяцев назад

    Excellent video, simple and easy to follow. Many thanks

  • @alvarez958
    @alvarez958 Год назад

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

  • @rafaeln.castrom.6453
    @rafaeln.castrom.6453 Год назад

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

  • @cotizatuobra
    @cotizatuobra Год назад

    Thank you Jim!! Cheers from Argentina.

  • @NataniaCory
    @NataniaCory Год назад

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

  • @healingzen338
    @healingzen338 Год назад

    Wow! Fantastic work Fahad.

  • @stanleyd777
    @stanleyd777 Год назад

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

  • @rasgsg3999
    @rasgsg3999 4 месяца назад

    AMAZING TUTORIAL, Thanks bro

  • @muhammadwaqaszafar5693
    @muhammadwaqaszafar5693 3 месяца назад

    Thank u so much, This code help me alot.

  • @faisalfarid851
    @faisalfarid851 Год назад

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

  • @advanced-developers
    @advanced-developers Год назад

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

  • @aliplays5893
    @aliplays5893 Год назад

    Great u just explained it easily

  • @zakariakhan4961
    @zakariakhan4961 Год назад

    i always learning new objects to watch your tutorials 💌

  • @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

  • @Rqieee
    @Rqieee Год назад

    Amazing tutorial 👍👍👍👍, thanks

  • @snifferx5002
    @snifferx5002 Год назад +2

    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?

  • @bindutagore
    @bindutagore Год назад

    hi jim i like ur videos very informative thank u

  • @almahmud1834
    @almahmud1834 Год назад

    another great tutorial ☺️🫡🫡

  • @MuhammadIrfan-qw6zu
    @MuhammadIrfan-qw6zu 7 месяцев назад

    Very Nice ❤

  • @gladiadoraxe3795
    @gladiadoraxe3795 Год назад +1

    @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!

  • @priyajitsamanta
    @priyajitsamanta Год назад

    Wonderful 😊

  • @thinktechllc8667
    @thinktechllc8667 Год назад

    thank you soo much
    God bless you

  • @vesir4553
    @vesir4553 9 месяцев назад

    Love the intro!

  • @susangemayel-tapper3794
    @susangemayel-tapper3794 Год назад

    Thanks for sharing.

  • @fernellie0997
    @fernellie0997 8 месяцев назад

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

  • @pk_videograf
    @pk_videograf Месяц назад

    Great! But how do I optimize this for small Laptops? I have tried a lot, but the containers are then too narrow and they cannot be arranged under each other as in the mobile view.

  • @alanmartinezbrito
    @alanmartinezbrito 11 месяцев назад

    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.

  • @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.

  • @heberlucero5032
    @heberlucero5032 4 месяца назад

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

  • @__al-uf5oe
    @__al-uf5oe Год назад

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

  • @muhammadwaqaszafar5693
    @muhammadwaqaszafar5693 2 месяца назад

    hello, Can you please let me know if i want to show the picture from right and pop should show to upward, But it should not be shown in full section. How this could be?

  • @fabiomuzzarini1507
    @fabiomuzzarini1507 6 дней назад

    Why in my case I have a switching animation that zooms in the alternative pictures?

  • @bencetakats884
    @bencetakats884 Год назад

    you are awesome 😁

  • @aliunal2102
    @aliunal2102 8 дней назад

    The headings are not vertically centered in the box. What could be the reason?

  • @ayoubchakri7555
    @ayoubchakri7555 10 месяцев назад

    THANK YOU SO MUCH

  • @CrazyCatLadyUwU
    @CrazyCatLadyUwU 6 месяцев назад

    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!

  • @365x1cr
    @365x1cr Месяц назад

    Bro can we do two card for image and for video . If yes then can you let me know how i can do this where card 1 and 3 will be image and card 2 will show a video on the whole parent container

  • @BominFit
    @BominFit 4 месяца назад

    nice

  • @gemny
    @gemny Месяц назад

    Hi! Amazing tutorial thanks! It works! Only with a problem, the text of the first section doesn't disappear, it stays there but more down (that makes the message appear over the other texts! when is Table or Mobile, but also happens with pc version) Do you have any idea about how can I resolve it? Thanks!

    • @gemny
      @gemny Месяц назад

      Update: I solved deleting that box and duplicating another one that didn't have that problem! Later I updated its name and that's all

  • @afsarali-pe7pw
    @afsarali-pe7pw 9 месяцев назад

    Thank you

  • @yangnolan3910
    @yangnolan3910 Год назад +1

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

  • @gladiadoraxe3795
    @gladiadoraxe3795 Год назад

    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..

  • @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?

  • @gustavonascimento2511
    @gustavonascimento2511 5 месяцев назад

    amazing widget

  • @learnearn3166
    @learnearn3166 Год назад

    Very nice

  • @becomingweb5222
    @becomingweb5222 10 месяцев назад

    Thanks!!!

  • @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! :)

  • @HamidTalebiht
    @HamidTalebiht Год назад

    Great 👍

  • @tamratteshome2001
    @tamratteshome2001 Год назад

    very attractive

  • @wandersoulwebdesign
    @wandersoulwebdesign Год назад +1

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

    • @TM4CHII
      @TM4CHII Год назад

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

  • @pantelisalexo
    @pantelisalexo 7 месяцев назад

    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!

  • @gladiator425
    @gladiator425 Год назад

    I used . thank you verymuch I like it dude

  • @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

  • @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.

  • @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 Год назад

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

  • @abbasbasheer4352
    @abbasbasheer4352 10 месяцев назад

    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.

  • @NKartline-z3w
    @NKartline-z3w Год назад

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

  • @catsdogshub8499
    @catsdogshub8499 Год назад

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

  • @vinaymore44
    @vinaymore44 5 месяцев назад +1

    we can achive this using only css also..

  • @Lufimusicindia
    @Lufimusicindia 5 месяцев назад

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

  • @zerocool1384
    @zerocool1384 10 месяцев назад

    Hey Jim can we do this with Elementor Free ?

  • @adied7725
    @adied7725 Год назад

    how to add bg video on hover?, please

  • @ranjithranjith9227
    @ranjithranjith9227 3 месяца назад

    Hi sir how to increase the section ,, i add the 5 or 6 images sir ,how do sir ,please reply or video create pleasee help me sir ,,i have small customer so help me

  • @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.

  • @chorzyy
    @chorzyy 3 месяца назад

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

  • @Fatima-gh5um
    @Fatima-gh5um Год назад

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

  • @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 😅

  • @Ashu_edits99
    @Ashu_edits99 Год назад

    How to hide the html container

  • @GTXnihboss
    @GTXnihboss Год назад

    Bro , please tutorial preloader animation custom with GIF

  • @abgupta007
    @abgupta007 6 месяцев назад

    Esko slider me kaise kru

  • @mananhunyar4839
    @mananhunyar4839 12 дней назад

    👍

  • @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!

  • @raminify
    @raminify 5 месяцев назад

    where css code

  • @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?

  • @bakoline
    @bakoline Год назад

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

  • @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

  • @madtalha-dp6tl
    @madtalha-dp6tl 2 месяца назад

    Your website is not open Bro and its too slow

  • @hasanmahmud2461
    @hasanmahmud2461 9 месяцев назад

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

  • @joharamohammad4139
    @joharamohammad4139 9 месяцев назад

    You are so fast 😢 and some steps cant find it

  • @dandyazhar3821
    @dandyazhar3821 8 месяцев назад

    daaaaaaaaang