Elementor Playing Card Image Hover Effect with Animated Popup/Lightbox | Expanding Image Gallery
ฝัง
- เผยแพร่เมื่อ 5 ต.ค. 2024
- In this video, I'll show you how to make an Elementor Playing Card Image Hover Effect with Animated Popup/Lightbox and create this Expanding Gallery.
✅Get Elementor Pro:
makedreamwebsi...
✅Get code snippet for Playing Card Effect:
makedreamwebsi...
✅Get this as Ready Template (✨1 CLICK INSTALL✨):
templatish.com...
Recently, I made this beautiful playing card hover effect/animation using only the Elementor free version. If you reload the page, you can see a beautiful entrance expanding animation and when you move the mouse, here is the tooltip which says: "click to view". After clicking on these items, we can see a soothing transition with some extra information. To create this we don't need any image popup WordPress plugin.
If you want, you can get this image gallery with lightbox as a ready template from my template shop. As a bonus, you'll get both the container and non-container versions. But, if you don't want this template, you can also start it from scratch.
First, take a brand new container and place an heading widget inside that. Under that, also take a container where we'll place all of the items. To create these cool card, we need a container and also an inner container and inside that we can place other content like heading and subheading.
Then, we also make the tooltip which is showing when we move the mouse and also add an close icon for the animated popup view. We also make everything responsive for the tablet and mobile devices.
Finally, let's add some classes with some elements and add the custom code the make our spreading animation working.
So, that's how you can make this image hover effects in your WordPress website. If you enjoy this video, don't forget to like and subscribe.
You bro are THE Elementor WP site style magician!
I have to say again however I’m heartbroken there isn’t much mobile view style 😢📲 Still so surprised you don’t make that a priority as of course for years now most sites are viewed on mobile phone (and I’ve made that a priority in my own and all client site designs for 8+ yrs! Crazy to me how still most web designers don’t put as #1 priority)
Anyway luv and respect your talents and vids 100💯👏🏻✨
Thank you so much for your appreciation... Yes, on mobile I just keep it simple because with this layout it's really hard to fit all the images on mobile screen!
@@MakeDreamWebsite but my bro you MUST make the mobile on scroll experience as engaging as dynamic as the desktop/laptop experience period!! Just crazy to me as I’ve prioritized mobile first web design styling for literally 8+ years and ha wow how so many incredible web designers still don’t get how priceless this is
Thanks my friend! I'll keep that in mind!
One more thing I also want to mention, for mobile there are some limitations. For example: there is not enough space for all layout and effect. So, a different and simplified layout is more suitable rather than a broken and incomplete layout. And also sometimes I also skip fancy hover effect from mobile. There is nothing called hover for mobile. So, when you click you can see that hover effect for a split of second until the link is redirected. So, for this some cases I prefer to use simplified version of the effect/layout rather than make it incomplete and broken.
Brilliant! Works perfectly! Thank you sir!
You're welcome!
Nice effect! Thank you for sharing. I'll try it soon :)
You're welcome!
Stunning! Your content is always a go-to, really good.
Quick question, is it possible to do the Grayscale filter effect without having the fixed cards you created? Like for a regular 3 cards services section with images
Awesome! Thank you for sharing 🤩
You're welcome!
Bro I just love your videos.Keep Going🎉.Even my teacher does not teach me like you do😂
Haha… glad it helps you!
first of all thank you for showing this! ive been looking everywhere for somehting like this for my tarot site!! however, i have elementor pro and its not working the same for me :( idk why not. is it flexbox or grid? itsl ike i have too many options on my end for it to turn out like yours therefore it doesnt :/ lol
you're just so helpful man!
Glad you think so!
অসাধারণ ভাই , কিন্তু বাঙালি আমরা তো লাইক কমেন্ট করতে লজ্জা পাই , আশা করি বুঝতে পারছেন , কিন্তু আপনার ভিডিও পাবলিশ বন্ধ কইরেন না ভাই
Dhonnobad! InshaAllah video publish bondho hobe na...
It's good. I m building new website this effect will help me lot😊
Great! Glad to hear!
Hi sir, I just bought the effect and literally drag with only changing the text and images but I got a problem, when I click it does bug and does not show the picture zoomed until I click in another one. Sorry for the bothering but what it could be?
Can you please email me your page link?
Hi, everything seems fine but the button animation and the image on clicking when it opens is blurry and not visible. also, the image when clicked doesn’t comes in front, it just gets zoomed in in its respective place . Can you help please
Can you please repeat everything from scratch
Excellent!!!
Thanks
What about the responsive mode?
As the animation doesn't fit on mobile so I keep it simple there...
You are a magician
You can edit everything from the navigator even though its not visible on the preview. On the live page if it works then it's fine...
@@MakeDreamWebsite it is not working on the live page too, unfortunatelly :/
@@angie25595 then you may do something wrong or missed up something. Can you please repeat it again carefully without missing any step...
Hi Jitu! All good? How incredible is this work! Do you have a tutorial on how to make the menu effect on your official website? I'm developing a technology website, and I loved the hamburger menu effect on your site. Could you tell me how to do it?
Yes, I'll publish the tutorial about the menu next which you saw on jituraiyan.com
@@MakeDreamWebsite Do you have a date for the video to be released?
I'll release it within this week
awesome man
Thank you!
Nice one
Thank you!
As soon as I add the HTML code, other content disappears from the website :/
Have you done it correctly? I think you have done something wrong. Can you please do it again from scratch?
@@MakeDreamWebsite Yes I did, after it didn't work I bought your template and tried it again, unfortunately it doesn't work there either.
As soon as the HTML code is inserted a lot of content disappears from my page, as soon as I remove the HTML code the content is there again
I see… you can email me your page link…
@@MakeDreamWebsite Done✅
@@MakeDreamWebsite for me its the same. when I compare the thins ( Elementor Advanced Slider with Card Carousel | WordPress Custom Slider Design with Text and Image) with this thing. the first thing doesn't work. but when I deleted the html form this video, the card carousel works... but together it clashed
I swear I follow the entire tutorial and it almost never works out.
Can you please repeat it again. I think you have done something wrong…
sir its not working
You need to follow all the exact same steps. Hope then it'll work
@@MakeDreamWebsite sorry sir its work i add wrong class
Thank you for letting me know!
@@MakeDreamWebsite sir can you share with your Instagram I'd ?