For a cooler Transition replace "linear" with "ease" OR Choose what u like ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end ease-in - specifies a transition effect with a slow start ease-out - specifies a transition effect with a slow end ease-in-out - specifies a transition effect with a slow start and end cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
This is great, but I have a question. Do you know how to make this work with an image instead of a column image? It sort of worked but the image starts somewhere off screen then appears when hovering but not like it does in the column. The reason I want an image and not a column background is to link it to a pop up to play video.
Please help! I've added a bar of color under the header but it does not disappear like the rest of the content. Also the other boxes do not move. Only the box being rolled over moves which causes the expanding content to go behind the next box.
@alizare478 On the Main container go to advanced settings and paste this " elementor-container " (without " ) in the css class, do the same to the first image container and paste " elementor-column " in css class, and then afterwards deplicate it and do the changes to the rest of the containers.
@@istifaaahamed7756 You are a life saver!! Thank you so much! I thought I did something wrong because it was not working. This was what I needed!!!! Again, Thank you!
@@MakeDreamWebsite he is saying the header should not be hidden, all the contents are hidden until the user hover on the picture, is it possible to leave the header alone? other contents should show on howver
I’m not sure why but the code doesn’t work for me. Is it broken? Or it’s outdated? Do we have to have five columns, or can we do three for example? Does it work with any widgets or just with the ones you used (text and icons)? Thanks in advance.
Please make a video on the hover effect Like underline from left any text or button. I have searched many places but have not found a good result.I always first view in your all video. Please make next to a video on this topic.
Only updating the code snippet doesn't work. You also need to update some other structures. Maybe I'll upload a container version video of this later (not 100% sure). Another option is: you can purchase its ready made template (container version) inside this template bundle (effect no. 5) - makedreamwebsite.gumroad.com/l/whcga
The containers are for those users who use the new Elementor flexbox version, when you update your site to that container version, you can also use those template
I TOTTALLY LOVE THIS CSS CODE, but when i put the code in the mobile device of my website, the css code dont do the same as yours. It goes to the left instade of going down. When it goes left makes a blank space on the right. theres a way to correct that?
I am already using one slider section from your other video. So when i paste the code, something else comes up instead of the effect. Is there a way to correct it
Hello, i loved your tutorial. All worked ! However i'm asking if it were possible to get the first column active like it's in hover to show the user to hover the next one to see informations. Thanks
How do I make my first column open by default, I don't want everything to be collapsed...then the hover effect should still work on all the images afterward
@@MakeDreamWebsite Today I tried this code again. Although I can hide the text at first, I found that it did not hide the picture and the mouse moved to display the text.
hi, is it possible to make it expand on click instead of on hover? what kind of changes will have i have to make in the custom css to make it work on all fronts? thanks in advance. p.s -- i haven't started yet, so i'll make sure to get the domain from bluehost and elementor from your links. just need to be sure it's possible to adjust the brightness a little on hover -- so it acts as an indicator that its clickable, and then when user clicks that image it expands.
Don't wait. I suggested the same. This video is only for selling this code to people who make purchases.. this is not educational video, this is hard core selling... I have already unsubscribed this channel.
Bonjour and Thanks for your tutorial. For me it doesn't work, but I wonder if having enabled "Flexbox Container" beta would be the reason. When do you think ?
@@MakeDreamWebsite Thanks again. Where can we buy tools made by you. I would like to reward you for your work and the sharing done here. (forgive me for my english google translate)
@@StéphaneSAULNIER You're very welcome! You can visit my template shop from here makedreamwebsite.gumroad.com/ where you can find a bunch of readymade templates
@MakeDreamWebsite Outdated video because columns are being replaced with flex containers. No one uses columns based design these days. The code snippet is not working. Why the code that works with container is only available on purchase and not in the code snippet link? The purchase option is for people who does not want to go through all the steps. So if I want to follow all the steps in the video, then the container code should be available on the link you have provided in the description.
This video is only for selling this code to people who make purchases.. this is not educational video, this is hard core selling.. this code does not work with containers and still despite many request, the code has not been updated. Don't waste time watching this video
I suggested the same. The creator has already created the code that works with container but he is not updating it in the snippet link. This is hardcore selling practice. I have already unsubscribed this channel.
Great video. Sadly, the CSS code does not work with the newly launched containers. I have spent an hour adjusting the class names with trial and error. @MakeDreamWebsite I know you have updated the code in readymade template, but that is only available if we purchase. This defeats the whole purpose of watching the video and learning from it. It is a request to update the video content that uses containers only.
@@MakeDreamWebsite Why email you? Also there is no email address on your website. I send you message via submission form but no reply from your end. I just requested something here so you can directly respond here. This video is outdated and the code does not work because most users are using containers in elementor to build blocks.
@@ashish5287 Sorry, I have missed your email. What can I do when there is no container, and then there is no way to predict the future for me. So, I made it with section/column and now it become deprecated. If you want to apply this effect, you can temporarily disable the flexbox container and make this section. After completing you can again reactivate the container. That should work!
@@MakeDreamWebsite Disabling containers in elementor will delete all the existing container based designs that have been created before and that is why temporarily disabling is not the solution. Yes, when you created the video, containers were not there. I am just requesting you to just make few small changes to your existing code in your website that works with containers too. And that way it can be useful for all new viewers because columns are now a thing of past.
Tried this using the Flexbox containers and the code wasn't immediately compatible. This is because the class names are a little different: My updated Custom CSS for the top container is as follows ( (hope this helps somene) :-
selector .elementor-widget {
width: 400px;
opacity: 0;
transition: all 0.5s linear;
}
selector > .e-child {
display: flex;
flex-wrap: nowrap;
cursor: pointer;
}
selector .elementor-widget-wrap {
display: flex;
flex-direction: column;
transition: all 0.3s linear !important;
}
selector > .e-child {
display: flex;
flex-direction: column;
min-width: 1px;
transition: all 0.5s linear;
overflow: hidden;
}
selector > .e-child:hover {
width: 100%;
}
selector > .e-child:hover .elementor-widget {
opacity: 1;
}
@media (max-width: 1024px) {
selector .elementor-widget {
width: 300px;
}
}
@media (max-width: 767px) {
selector .elementor-widget-wrap {
height: 300px;
}
selector > .e-child:hover .elementor-widget-wrap {
height: 380px;
}
selector > .e-child {
flex-wrap: wrap;
}
}
Thank you!
Thanks for the code
somehow in Elementor the code does work, but when publishing it, it does not.
thank you brother its working
thanks ❤💛
Hello, the code does not work, it removes the text but when you hover over it, the image does not popup
I have same issue
same issue
same
still now same
For a cooler Transition replace "linear" with "ease"
OR Choose what u like
ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
linear - specifies a transition effect with the same speed from start to end
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
Thank you, i personally like ease more than linear. it appear more smooth
Thank you!
This is great, but I have a question. Do you know how to make this work with an image instead of a column image? It sort of worked but the image starts somewhere off screen then appears when hovering but not like it does in the column. The reason I want an image and not a column background is to link it to a pop up to play video.
make it work with container?
Create your own plug-ins and conquer the market. Top notch work.
I appreciate this!
It turn my work for on a project from good to GREAT!!!
Glad it helped you!
Thank you my brother
You’re welcome!
is it still working? I tried to add this css but it only makes the letters disappear and nothing else, no hover
Same here!
Very helpful. Thanks a lot.
You're welcome!
justo lo que buscaba, muchas gracias de verdad
¡bienvenida!
Please help! I've added a bar of color under the header but it does not disappear like the rest of the content.
Also the other boxes do not move. Only the box being rolled over moves which causes the expanding content to go behind the next box.
Thanks so much its very helpful
You're welcome!
great job but it dosnt work for me, when i past code tha charactores gone and noting change.what should i do?
@alizare478 On the Main container go to advanced settings and paste this " elementor-container " (without " ) in the css class, do the same to the first image container and paste " elementor-column " in css class, and then afterwards deplicate it and do the changes to the rest of the containers.
@@istifaaahamed7756 i am also facing same issue but i did not understand what are you trying to say
@@istifaaahamed7756 You are a life saver!! Thank you so much! I thought I did something wrong because it was not working. This was what I needed!!!! Again, Thank you!
@@saimarierivera9355 I tried this with "elementor-container" and "elementor-column" and still doesnt work for me?
Any solution?
Is it possible to leave the heading without the hover?
Which part have you mentioned about? Can you rephase?
@@MakeDreamWebsite he is saying the header should not be hidden, all the contents are hidden until the user hover on the picture, is it possible to leave the header alone? other contents should show on howver
thank you sooo much!
You're welcome!
Is there a way to have a static first section (welcome blurb), and then the only the remaining sections expand?
it worked great for years but all of a sudden it doesnt work anymore for me. you do have the same problem or just me?
Merci beaucoup!!!!!!! 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👏👏👏
Je t'en prie!!!!!! 👍👍👍👍👍👍👍👏👏👏
Thanks, Nice video
Welcome!
What about using flex-grow in a loop container?
Brilliant, thank you
Thank you too
Hello bhai
Code is not working when i paste code it removes our content but when we hover it doesn't zoom out image please resolve the issue
Can you insert the css code for container?
I’m not sure why but the code doesn’t work for me. Is it broken? Or it’s outdated? Do we have to have five columns, or can we do three for example? Does it work with any widgets or just with the ones you used (text and icons)? Thanks in advance.
didn't work for me either
Probably because Elementor has switched from columns to containers. You might have to update the code.
I ended up buying the package of ten effects, which includes this one. I’m not a professional web designer, so for me it was well worth the $10.
@@georgikanev6745 which package was that?
Very nice, thank you for sharing. Would be great if You could update this to work with flex box containers!🙂
I’ll make it very soon!
Love...thanks for all you do. I do not want my content to show on hover, I only want the images to expand, the content should not be hidden
Inside the css code somewhere you can see opacity:1; Just remove that line. Or from the navigator view you can you can delete the inner content.
This still working?
Didnt get cover effect after copied css, text just disapear.
doesnt work anymore
Please make a video on the hover effect Like underline from left any text or button. I have searched many places but have not found a good result.I always first view in your all video. Please make next to a video on this topic.
Noted! Thank you for your recommendation.
Hello love this tutorial!!! BUT
since the elementor releases the "container" widget to replace the column
could you update us the code please?
Only updating the code snippet doesn't work. You also need to update some other structures. Maybe I'll upload a container version video of this later (not 100% sure). Another option is: you can purchase its ready made template (container version) inside this template bundle (effect no. 5) - makedreamwebsite.gumroad.com/l/whcga
@@MakeDreamWebsite hey my friend. After buy you package.. only install Effect No5 and it works then with Container?
Yes, there are both versions... Container and non-container
The containers are for those users who use the new Elementor flexbox version, when you update your site to that container version, you can also use those template
Thanks, it worked perfectly.
But is it possible to show the title and image always and show description on hover ?
Yes, it's possible. You need to modify the CSS for that...
How to do this animation verticallty?
I want to show the content before hover over how can i do that please guide .
Thank you❤❤
I TOTTALLY LOVE THIS CSS CODE, but when i put the code in the mobile device of my website, the css code dont do the same as yours. It goes to the left instade of going down. When it goes left makes a blank space on the right. theres a way to correct that?
I am already using one slider section from your other video. So when i paste the code, something else comes up instead of the effect. Is there a way to correct it
On tablet it's now 2 lines and broken. Do you have a fix?
Hello, i loved your tutorial. All worked ! However i'm asking if it were possible to get the first column active like it's in hover to show the user to hover the next one to see informations. Thanks
Yes, you can. but you need JavaScript code for that
this is what I am thinking...the first column should be active...please share if you find a way around it
Thank you so much for the tutorial, I just needed the title to be remain on the image before hover, can you please help me with that
Inside the CSS you can see a line, opacity: 0; you just need to remove that...
@@MakeDreamWebsite Thank You so much, But how to only keep Title and make opacity 0 for paragraph ?
Great job
Thank you!
How do I make my first column open by default, I don't want everything to be collapsed...then the hover effect should still work on all the images afterward
How to do with flexbox container?
I'll add a flexbox container version with my ready made template soon!
@@MakeDreamWebsitePerfect! 👏
Why is there no animation effect after adding the latest Elementor
I'll check it...
@@MakeDreamWebsite I'll try again tonight, maybe it's a problem with my operation, thank you for your reply
@@MakeDreamWebsite Today I tried this code again. Although I can hide the text at first, I found that it did not hide the picture and the mouse moved to display the text.
hi . thanks for tutorial . but not work with tablet . please test in tablet .I am a newbie. I tested it on a tablet and the effect does not work
its not working😥
Fantastic
Many many thanks!
Hum image zoom in or zoom out mouse wheel scroll say kar sagta Hy elementor ma plz guide
Hello, is the code working yet?
Hello, It is not working for tablet mode. Elementor PRO 3.9.2.
Okay, I'll check and update the code snippet if needed!
Wow! Perfekt
Thanks Leon
Can I remake that when I got more cards let say 15 and it’s actually a expandable card slider or a carousel . 🧐🧐
Yes, It'll also support that...
Hum zoom mouse wheel say kar sagta Hy ? It's agent
Hi, thank you for the video, but it doesn't work for me, nothing happens :(
Can you please follow the process again carefully?
@@MakeDreamWebsite I understand now from the replays' it does not work with container, is it right?
worked perfectly, but I noticed a little bit of lag with the first and last columns , Please help.
hi, is it possible to make it expand on click instead of on hover? what kind of changes will have i have to make in the custom css to make it work on all fronts? thanks in advance. p.s -- i haven't started yet, so i'll make sure to get the domain from bluehost and elementor from your links. just need to be sure it's possible to adjust the brightness a little on hover -- so it acts as an indicator that its clickable, and then when user clicks that image it expands.
Great Job, But This code is not work with flexbox of Elementor. Please provide solution for Elementor FlexBox. Thanks!
Don't wait. I suggested the same. This video is only for selling this code to people who make purchases.. this is not educational video, this is hard core selling... I have already unsubscribed this channel.
@makedreamwebsite can you offer some help here? I also use the flexbox and the effect does not work
Awesome
Thank you
Great But not working with new elementor container
Okay, I’ll update the code snippet so it will also work for container
Bonjour and Thanks for your tutorial. For me it doesn't work, but I wonder if having enabled "Flexbox Container" beta would be the reason. When do you think ?
Yes, if you first do it with section/columns and then activate the new flexbox container that will work...
I'll also add the container version with my readymade template in the description
@@MakeDreamWebsite thank you so much
@@MakeDreamWebsite Thanks again. Where can we buy tools made by you. I would like to reward you for your work and the sharing done here. (forgive me for my english google translate)
@@StéphaneSAULNIER You're very welcome! You can visit my template shop from here makedreamwebsite.gumroad.com/ where you can find a bunch of readymade templates
How do I get the CSS code?
In the description
@MakeDreamWebsite Outdated video because columns are being replaced with flex containers. No one uses columns based design these days. The code snippet is not working. Why the code that works with container is only available on purchase and not in the code snippet link? The purchase option is for people who does not want to go through all the steps. So if I want to follow all the steps in the video, then the container code should be available on the link you have provided in the description.
I suggested the same. The creator has already created the code that works with container but he is not updating it in the snippet link.
It did'nt work for me for some reason :(
Maybe you're working on the new flexbox container version...
how make this as carousel ?
Then, it need to be start in another way. I've to check it!
@@MakeDreamWebsite
Ok, waiting for your reply
It's not working, I believe it's the code used in the flexbox model that is not compatible, could you redo the tutorial?
I’ll update the code snippet so it will also work for the flexbox structure…
doesnt work
The link to your code is not working! Please reupload. Thanks!
Are you using the new flexbox container?
I can't find the code in the description. Could some one post it please
It's on the description, the 3rd link
This video is only for selling this code to people who make purchases.. this is not educational video, this is hard core selling.. this code does not work with containers and still despite many request, the code has not been updated. Don't waste time watching this video
Your Code Doesn't Work Bro!
It's not work in flex container first disable it
When you going to change the code for container ,You only want to sell
I suggested the same. The creator has already created the code that works with container but he is not updating it in the snippet link. This is hardcore selling practice. I have already unsubscribed this channel.
Great video. Sadly, the CSS code does not work with the newly launched containers. I have spent an hour adjusting the class names with trial and error. @MakeDreamWebsite I know you have updated the code in readymade template, but that is only available if we purchase. This defeats the whole purpose of watching the video and learning from it. It is a request to update the video content that uses containers only.
You can email me...
@@MakeDreamWebsite Why email you? Also there is no email address on your website. I send you message via submission form but no reply from your end. I just requested something here so you can directly respond here. This video is outdated and the code does not work because most users are using containers in elementor to build blocks.
@@ashish5287 Sorry, I have missed your email. What can I do when there is no container, and then there is no way to predict the future for me. So, I made it with section/column and now it become deprecated. If you want to apply this effect, you can temporarily disable the flexbox container and make this section. After completing you can again reactivate the container. That should work!
@@MakeDreamWebsite Disabling containers in elementor will delete all the existing container based designs that have been created before and that is why temporarily disabling is not the solution. Yes, when you created the video, containers were not there. I am just requesting you to just make few small changes to your existing code in your website that works with containers too. And that way it can be useful for all new viewers because columns are now a thing of past.
@@ashish5287 ok, I'll add the container template here either I'll update the code snippet so It'll support container version too
How to use this with loop posts?