EXPANDING Image Hover Effect/Animation with Text Overlay in Elementor | Elementor Advanced Carousel

In this Elementor Advanced Carousel tutorial, I'll show you how to make an EXPANDING Image Hover Effect/Animation with Text Overlay in Elementor.

✅Get Elementor Pro:

✅Get Domain & Webhosting(SAVE 50%):

✅Get code snippet for Elementor Image Hover Effect:

✅Get creative templates on my Template Shop:

Today I’ll show you how you can create image hover animation (show text) on your WordPress website by using Elementor. You can apply this effect on a team member area, product category section or any other places as you want. So, today we will create this Elementor team member carousel with this effect and also make it fully responsive from tablet, mobile or any other devices.

First, we take a 5 column layout and add content inside those columns. Then, we add background images for each of those columns with a background overlay color. We have use some custom CSS to enable the Elementor image hover zoom effect.

After adding the code, the content inside each column become invisible by default and when we hover on the column, it expands and the content inside that become visible.

We have also make this Elementor advanced carousel/slider responsive for the tablet and mobile devices. On mobile, we put the images on vertical orientation unlike the desktop.

So, that’s how you can create this Elementor cool effects. If you enjoy this Elementor advanced design tutorial and want to get more Elementor tips and tricks, don’t forget to like and subscribe.

[gogaming]

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

[daviddobbing]

Is there a way to have a static first section (welcome blurb), and then the only the remaining sections expand?

[southamptonwebdesign]

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;
}
}

[Fitness]

Hello, the code does not work, it removes the text but when you hover over it, the image does not popup

[silverdolla]

I appreciate this!
It turn my work for on a project from good to GREAT!!!

[pleuratpllana]

Create your own plug-ins and conquer the market. Top notch work.

[saltmedia]

What about using flex-grow in a loop container?

[alizare]

great job but it dosnt work for me, when i past code tha charactores gone and noting change.what should i do?

[sumitgupta]

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

[juharichter]

Very nice, thank you for sharing. Would be great if You could update this to work with flex box containers!🙂

[stefanvemic]

This still working?
Didnt get cover effect after copied css, text just disapear.

[kathiresanannamalai]

Thanks, it worked perfectly.
But is it possible to show the title and image always and show description on hover ?

[amandakristhina]

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?

[SamsonAdeyemi]

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

[abnerramos]

is it still working? I tried to add this css but it only makes the letters disappear and nothing else, no hover

[mackyangeles]

On tablet it's now 2 lines and broken. Do you have a fix?

[UsmanKhan-kolh]

I want to show the content before hover over how can i do that please guide .
Thank you❤❤

[SamsonAdeyemi]

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

[hmikramwpexpert]

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.

[lareservedesloutres]

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