EXPANDING VIDEO ON HOVER - Elementor Wordpress Tutorial Flex Container

We're creating an awesome video effect element in two ways: 1. with the Elementor video widget and 2. with a simple HTML structure
CODE: www.notion.so/CODE-Video-expa...
Timestamps:
00:00 Intro
00:52 Create the first version w/ the Elementor video widget
04:56 Add the icon
07:04 Create the second version w/ HTML
08:56 Outro
Thank you for watching!
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - / egliandrea
INSTAGRAM - / egliandrea.studios
🟠 FOR BUSINESS ENQUIRIES
[e-mail]
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
#elementortutorial #elementorpagebuilder #elementortipsandtricks

[@andreaegli]

Expand video on hover, enough said, hope you like it

[@sidhanthpovil]

It's great to have your videos available. You should keep going. Thank you so much for these tutorials.

[@andreaegli]

You are very welcome and thank you so much for watching. I'm and I will😉

[@NoahNP452]

Awesome, good video!
To make the hover effect grow more smoothly, you can adjust the transition property:
.item {
height: 100px;
overflow: hidden;
cursor: pointer;
flex: 0.1;
transition: height 0.5s ease, flex 0.5s ease;
}
.item:hover {
height: 360px;
flex-grow: 0.2;
flex-shrink: 0.1;
transition: height 0.5s ease, flex 0.5s ease;
transform: scale(1.2); /* Smooth scaling */
}

[@Wordpress-zx9il]

Thanks

[@jean-mahmoud_du_tacobel]

Expand our skills with your videos ❤

[@andreaegli]

Doing my best for you all 🤩

[@jean-mahmoud_du_tacobel]

@@andreaegli you do it ! I want to drink a lager with you 🙌

[@alexandrudragoi9065]

Great as always, thank you Andrea!

[@andreaegli]

Thank you, Alex! & you’re welcome 😉

[@kovinhas]

Another awesome video. Learned a lot. Keep continue doing this amazing content 🥵

[@andreaegli]

Thank you so much 😊 will do my best!

[@rajatsubhra95]

Awesome, very Helpful!

[@andreaegli]

Glad it was helpful!

[@JohnXionidis]

Very interesting I like it!

[@andreaegli]

Thank youuuuu 🤩

[@pierrecastermans873]

Thank you for this amazing video! :)
In my case, I had to add a negative (-10) padding on the left and on the right on the video to have a normal curve.
But I can't see the player controls anymore... :(

[@xAndre-d-Moraes]

Widget feature to build the hero from the last tutorial 'One Page Agency Website'. Thanks! 👍🏼

[@andreaegli]

You're very welcome!

[@meraopinionadda]

very helpful, it's great

[@andreaegli]

Happy to hear that 🤓

[@learnearn3166]

Thank you in advance. Let's check it out.👍

[@andreaegli]

You’re welcome ☺️ I hope you enjoyed it and found it helpful 🤓

[@charlie_99]

Thank you teacher ❤

[@andreaegli]

You’re welcome ☺️

[@visualmodo]

Really good content!

[@andreaegli]

Thank you so much!🤩

[@Webrisernl]

Hi Andrea! Can I also use the second method in combination to show a youtube video? I can not seem to get it work

[@AllenLu]

lets goooo

[@andreaegli]

🥳

[@WellPalCreative]

Hey Andrea, I'm so sorry to drag onto a video from 8 months ago, but I'm at a loss trying to solve it on my own. A while ago I used the instructions from this video to create an element on a site. It worked perfectly. However recently I've experienced it being displayed perfectly in the Elementor builder (backend) but in the preview and actual live mode, it's viewed as a regular black video box (so not the pill-shaped styling). Would be really appreciated if you could help shed some light IF you might know what could be causing this. Thank you so much

[@deepakbm1538]

Hey Andrea, what’s your Elementor version?

[@sharjeelkhan2576]

Hi I hope you are having a fabulous day. I don't know what i am doing wrong but when I put CSS and give class "ïtem" to the container, the video goes out of the border/overflow. And nothing happens when i put border radius. How do i fix this? I'll appreciate your help. Thanks

[@Djoako22]

Thanks a lot! Excuse me, what font do you use in the header at the beginning?

[@andreaegli]

welcome! Do you mean on the website I showed at the beginning of the video? That's not built by me but it seems like they're using gallery-modern font

[@Djoako22]

@@andreaegli Yes, thanks.🫶

[@user-iz6qd3et7p]

I'm obsessed with your channel! You have taught me so much! Thank you.
This video seems blurry on the left side panel, and I cannot see the CSS Class. Please let me know what it is so I can continue this tutorial?

[@andreaegli]

You are so welcome!
The code is in the description, always ;)

[@JohnXionidis]

I notice you are using Notion to share your custom CSS codes. I would love a quick tutorial of how you are using Notion. From a quick glance it seems really difficult to use and learn/master.

[@andreaegli]

Yeah, I’m using Notion but to be honest I don’t like it. You are right, Notion is super complex. I’m using the very basic features of it, I could make a super short video on how I use it but it would not be very interesting 😅

[@andreabonventre2827]

Hi Andrea, thanks a lot, beautiful name btw! How can i customize the code for different flexboxes? is it possible? let's say i would like to decide the shrinking timing of every container. Maybe is easy but i am just starting, thanks a lot!

[@ebrusarioglu8373]

Hello egli amazing work

[@andreaegli]

If you write all the steps you have taken, I might be able to help but like this, not really. Could be a ‘small’ thing that you’ve overlooked…debug is the word of the day 😉

[@philipsgregory2285]

Wow! This is really really nice. Please can you share the website you got the inspiration from?

[@andreaegli]

Thank you! 😉 Here it is golpys.co.uk/

[@nidarahman2305]

I am loving your creative videos, but i have a suggestion, your videos have small font size in the left panel of elementor , meaning its fine to watch on large screens but on laptops or smaller the fonts are hard to read

[@andreaegli]

Hey! Aww, thank you! Hmm, ok, I will see what I can do about that

[@claudiobarbosapt]

Hey Andrea, can you share the link of the website you are showing as an example in the beginning of your video? I’m just curious to see the rest of it 😊

[@andreaegli]

Yes, of course😀 here it is golpys.co.uk/

[@philipsgregory2285]

@andreaegli thanks a lot, was looking for this too 😀

[@Scoutix1]

How to expand the video full screen and scale it when u scroll down

[@andreaegli]

You need additional code and it's more complicated...

[@decrea8439]

Awesome video as always , young lady how much do you usually charge for a website?

[@andreaegli]

🤓 thank you! It depends on so many factors…shoot me an email if you want to discuss this further 😉

[@farhatmahi4509]

Mine isn't expanding on the x-axis :(

[@andreaegli]

Give the container it's in more width...

[@michaeljauch-goppinger1122]

Good Video, but the autoplay will Not work on mobil.

[@andreaegli]

Thanks! It does autoplay on mobile, at least as tested on Chrome and Safari

[@ukaegbugreatjnr]

Despite using 50px Border radius , i didnt get a smooth curve.

[@ukaegbugreatjnr]

stopped watching, most of the tut never worked

[@Thegoodvibes-xd9yy]

is it mobile responsive

[@andreaegli]

It can be made mobile responsive, yes

[@Gccmotive]

Beautiful Smile...

[@andreaegli]

😊 thank you

[@AnikHossain-2149]

again