Elementor Wordpress Tutorial - Image Zoom with No Code and No Plugin

Without using any Plugins or Code - we can use a Native Elementor Widget to apply some Image Zoom - with wording over it - if you so wish :)
So simple :)
Elementor Wordpress Tutorial - Image Zoom with No Code and No Plugin
Get Elementor Pro: trk.elementor....
Get Elementor Cloud Hosting: trk.elementor....
Support us: paypal.me/Webs...
Mastery Membership: websquadron.co...
Indeed we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
Email: [e-mail]
Equipment Used:
Softbox Lighting Kit (to focus main light onto me in a dark room): amzn.to/3feqH18
Soundproof Panels (to provide a dark setting, and prevent sound bounce): amzn.to/3HVfwqa
3m Ethernet Cat 7 Cable (to maximise the Internet Connection as the room is upstairs): amzn.to/3GlBvGw
Anker 6 in 1 Adaptor (for the Macbook Air to increase USB-C, USB-A, HDMI, Ethernet Ports): amzn.to/3tiukLA
USB-C to Lightning Port Cable (from my iPhone to my Macbook Air): amzn.to/3K2tGaU
Powerline Adaptor (boosts internet connection from downstairs 380mbs to the upstairs room 120mbs): amzn.to/3r8YcYc
Floodlights (positioned to glow onto the walls): amzn.to/33mRqWD
LED Light stands (either side of me): amzn.to/3Iaerez
Fifine Dynamic Microphone: amzn.to/3osbxu2
Floating Shelves: amzn.to/3Fhxyl1
Hanging Pendant Light Holders: amzn.to/3qgwnhg
Vintage Light Bulbs: amzn.to/3K0bQ8B
Music used:
Track: Will You Be Mine (Remix)
Free download: brokeinsummer....
Artists: brokeinsummer.com
Contact: brokeinsummer....
Music provided by Audio Library Plus
- Get Elementor Pro here --- trk.elementor....
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/i...
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at [e-mail]
PPPS: We only build with Elementor Pro

[@cidijo]

Nope, the "call to action" doesn't give me the image box like it shows on your screen... Why? I guess is no longer free and need the pro elementor version 😔

[@websquadron]

Yup you need the Pro version
I would always advise that you invest in that.

[@MrCleverFox]

I know this is an older video. Hoping you're still interested in this topic. We're using Elementor Pro but looking for a plugin or way to use mouse-over magnify for products (similar to what they do on Amazon. Thinking it would be nice to have the mouse transform into a circle with magnified element inside. Do you have any recommendations?

[@websquadron]

Use the CTA widget and set it to cover :)

[@jarwa212]

how do we magnify an image. So let's say we add 5 images in a container, when you hover on the them they magnify. What to add that function on woocommerce images without using the plugins but using code

[@websquadron]

See this: th-cam.com/video/vB_bfvPIjEI/w-d-xo.htmlfeature=shared

[@jarwa212]

@@websquadron This is nice, zoom and slide effect. What about magnify effect? You know the little magnifying glass which appears on the side when you hover? The one which magnifies the section you are hovering over. Please share how to do that. Thanks

[@sakshishrivastava1659]

Thanks you so much! Very helpful video.
Keep creating these kind of superb videos.

[@websquadron]

Sure thing!

[@lulugoh3935]

Thanks for the video! I really hate to add any new plugin now (my company 8 years old website has a long listed plugin) because when there's something go wrong when WP or theme updated, it's always causing by one of the plugin! Thanks again!

[@PrintHousePrintingPress]

Why you did not show the widget?

[@websquadron]

Which widget?

[@healthyhealthtipswithafifa3051]

Today I need that info thank you

[@websquadron]

You are so welcome

[@litimhmida2793]

Can i use border radius on just image and how?

[@websquadron]

Have you adjusted the image style?

[@litimhmida2793]

@@websquadron I certainly did but managed to get that but adjusting the borders width from the advance tab however I'm stuck on how to add widgets on the CTA button like adding rating widget...etc . Is there a video that u can point me to on how to do that?

[@srikarb54]

Hi. Do you know how to make a extra button for this element. Like in the "call to action" widget there is only one button. I'm trying to add one more.
Thanks in advance!

[@websquadron]

You'd have to add in some Template ShortCode, or use HTML to add the buttons into the Text Editor.

[@UrielSoto]

Great video! I believe you can do the same within the background image settings.

[@websquadron]

Yup need to check that one again :)

[@suneelxd9473]

Thanks Imran, I was following the tutorial from elements how but seems this method is more simpler and quick to implement.

[@habibjalal9939]

I accept it. If the use able to zoom a specific area which user want otherwise it's not zoom just hover

[@websquadron]

I know what you mean - but it’s still zooming in when you hover.

[@ray-ty2rp]

Cool ! thx ! Can we adjust the responds time ? Feel like the pic is zooming slow .

[@websquadron]

You'd have to inspect, get the class name and then apply a transition duration to be 0.5s etc.

[@Xanthi_S]

That is amazing! Thank you so much!

[@websquadron]

Ha - you twisted my arm to release it early :))))

[@mohamedaslam7809]

Thanks man

[@websquadron]

Any time

[@MichelleWolff11]

That is so cool!

[@websquadron]

Accidentally I discovered how to do it :)

[@renisonfoy6705]

Tankil, yes !! 😉🙏🏽👏✌️ #marketing

[@websquadron]

Still can't believe it when I tried it and it worked - and I was like - Huh? What? Really? This Easy!!!!

[@Who.Said.Photography]

Cool Awesome tip

[@websquadron]

Surprised that this isn’t a feature inside Images normally :)

[@Who.Said.Photography]

@@websquadron is there anyway to get the Ken Burn Effect within a slider without a plugin?

[@websquadron]

@@Who.Said.Photography Only with the standard Elementor Background Slideshow. When you go to a Section, you'll see it at the end of the 4 options; Colour, Gradient, Video, Slideshow - and then yo can select Ken Burns.

[@andrescortez5335]

Call to action is now Pro

[@websquadron]

It always has been, and I always use Elementor Pro. Did you think think that I was using Free?

[@irvinargon]

@@websquadron you twat. Then if you knew it wasn't free, why make videos like this to waste people's time?

[@CaPiTaLisTiC69]

@@websquadron exactly, u said in video its for free. what a nerd

[@websquadron]

Without using another 3rd party.... you're welcome. Don't forget to unsubscribe. @@CaPiTaLisTiC69

[@CaPiTaLisTiC69]

@@websquadron in video u said its free to do

[@wpeasy]

Hey Imran. Another way that gives better control is to use the following global CSS.
Use a column overlay and add the class "col-scale-overlay" to the column.
You could add a bit of rotation, keyframes or whatever you like. The rule needs to be pretty specific to override the default rules applied by Elementor.
.col-scale-overlay{
--duration-over: 1s;
--duration-out: 0.5s;
}
selector .elementor-column.col-scale-overlay > .elementor-column-wrap{
overflow: hidden;
}
selector .elementor-column.col-scale-overlay > .elementor-column-wrap:hover{
cursor: pointer;
}
selector .elementor-column.col-scale-overlay > .elementor-column-wrap.elementor-element-populated > .elementor-background-overlay{
transform: scale(1) ;
transition: transform var(--duration-out) ;
}
selector .elementor-column.col-scale-overlay > .elementor-column-wrap:hover > .elementor-background-overlay{
transform: scale(1.2) ;
transition: transform var(--duration-over) ;
}

[@websquadron]

Indeed. I’ve got a few other ways too :) but the focus was to give an alternative way for those not wanting to code.
Cheers for the code though as some will find it super useful!

[@wpeasy]

@@websquadron :) I get it. And I understand that many users look for the most simple approach and that sometimes it is the best approach.
Interesting that people think of CSS as coding. To me, CSS is part of the basics of Web Dev. I get that JS can be daunting, but encourage anyone wanting to build sites to get familiar with CSS.
I guess page builders like Elemntor have blurred that line.

[@websquadron]

@@wpeasy Indeed. I always see CSS as adding extra style or function but it’s still code at the end of the day. Need to dig it out but in an earlier video I used some code for the image zoom but this one’s more about the use of the CTA widget which could be a nice nugget for some.

[@mohamedaslam7809]

@@wpeasy hey bro.
Is css really that easy?
I thought I gotta spend years to learn that

[@wpeasy]

@@mohamedaslam7809 Hey Mohamed. It is both easy and complex, depending on what you want to do. The biggest difficulty most people have is "Specificity". Basically, if there is more than one rule targeting an element, the most specific one wins.
I have started a debugging video series that walks through using Chrome to figure out CSS rules.
CSS is definitely work spending time learning and for the most part, isn't difficult.
With respect to Imran, I won't post links here unless he says it is OK.
So, Imran, is it OK or would you prefer that I do not put links here?

[@pollapattonkeaw4593]

How to put enlarge effect when we click on the picture in elementor?

[@websquadron]

That would require JS