Elementor Playing Card Image Hover Effect with Animated Popup/Lightbox | Expanding Image Gallery
HTML-код
- Опубликовано: 31 мар 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:
makedreamwebsite.com/elemento...
✅Get code snippet for Playing Card Effect:
makedreamwebsite.com/elemento...
✅Get this as Ready Template (✨1 CLICK INSTALL✨):
templatish.com/template/eleme...
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.
Brilliant! Works perfectly! Thank you sir!
You're welcome!
Nice effect! Thank you for sharing. I'll try it soon :)
You're welcome!
Awesome! Thank you for sharing 🤩
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
you're just so helpful man!
Glad you think so!
awesome man
Thank you!
Excellent!!!
Thanks
You are great teacher! I subscribed
Thank you!
@@MakeDreamWebsite Welcome:)
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.
Nice one
Thank you!
It's good. I m building new website this effect will help me lot😊
Great! Glad to hear!
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
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
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...
অসাধারণ ভাই , কিন্তু বাঙালি আমরা তো লাইক কমেন্ট করতে লজ্জা পাই , আশা করি বুঝতে পারছেন , কিন্তু আপনার ভিডিও পাবলিশ বন্ধ কইরেন না ভাই
Dhonnobad! InshaAllah video publish bondho hobe na...
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 ?