Elementor Hover Effects Image To Text On Hover 👍

[@chidieberebasil6258]

God bless you bro. You just saved the life of an elementor free version user

[@System22]

Glad to help Chidiebere Basil - Check out our Elementor hover effects playlist for more videos like this: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like, share and subscribe if you have not done so already - Thanks!

[@artebarocco]

You are so good and you really explain it so simply and clearly Thank you Regards from Switzerland

[@System22]

You're very welcome - Thank you for your kind words!

[@dilbarkhan1971]

sorry for my mistake. this video is absolutely useful.

[@System22]

No worries!

[@realboy090]

Awesome!

[@System22]

Glad to help Marco Adam - Check out our Elementor hover effects playlist for more videos like this: kzbin.info/www/bejne/q5LGi6ePZbSGatU&list=PLqabIl8dx2wqkGuqlL4RRLwJnBRO47jm2 - Please like, share and subscribe if you have not done so already - Thanks!

[@Zack87254]

Thank you so much, after seeing some other vids and reading elementor pages, this was finally the solution. Very good to explain also pro and non pro ways to go. perfect!

[@System22]

Glad to help Zack87254 - Check out our Elementor hover effects playlist for more videos like this: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like, share and subscribe if you have not done so already - Thanks!

[@realmaxtovar]

thank you so much!

[@System22]

Glad to help @realmaxtovar - Check out our Elementor hover effects playlist for more videos like this: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like, share and subscribe if you have not done so already - Thanks!

[@mfit.workouts]

This was so helpful. Thank you

[@System22]

Glad to help MFit - Check out our Elementor hover effects playlist for more videos like this: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like, share and subscribe if you have not done so already - Thanks!

[@kinesthetictune]

Very helpful! Coding zone ...I love it! Thank you for sharing....

[@System22]

Glad to help Kinesthetic Tune - Please like, share and subscribe if you have not done so already - Thanks!

[@ademirmesic8799]

great explanation! well done

[@System22]

Glad to help Ademir Mesic - Please like, share and subscribe if you have not done so already - Thanks!

[@depyrose]

Thank you so much for this amazing video!!! Very helpfull!

[@System22]

Glad to help @depyrose - Check out our playlist page for more videos on this: kzbin.infoplaylists

[@dilbarkhan1971]

Thank you very much

[@System22]

You are welcome

[@quiquio]

Work flawless, just tweak to 0.5 and it's perfect for me! Thank you!

[@System22]

Glad to help Rodrigo Quiquio - Please like, share and subscribe if you have not done so already - Thanks!

[@adamtaleb9296]

Great, thank you very much !

[@System22]

Glad to help Adrien Dalako - Please like, share and subscribe if you have not done so already - Thanks!

[@jjf7991]

Thanks for a great video tutorial. For image to text, what if I want my image to disappear upon hover and only the text to be visible. Is this possible with free Elementor version?

[@System22]

Yes it is JJ F - Have a look at this video, it should help - Check out our Elementor hover effects playlist for more videos like this: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like, share and subscribe if you have not done so already - Thanks!

[@huddynz5979]

wondering if there is a way to have the text off to the side, so not covering the image. when hovering over the image part of the text is no longer transparent or becomes visual.

[@System22]

Glad to help Huddy nz - You could move it over using margin. Make sure the padding covers the image for a hover trigger - Check out our Elementor hover effects playlist for more videos like this: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like, share and subscribe if you have not done so already - Thanks!

[@huddynz5979]

@@System22 i did this .hoverbox{ transition: transform .9s; } .hoverbox .elementor-image-box-description{ transition: color .4s } .hoverbox:hover { transform: scale(1.1); } .hoverbox:hover .elementor-image-box-description{ color: #000000!important; } so when you hover the image it will display the description.

[@System22]

Great answer!

[@heatherdawnnovecosky4245]

Great video. I put 4 images together but can't seem to get the spacing right for iPad. Any tips on how to make the spacing proper for iPad?

[@Samishii00]

Damn, that is awesome i though CSS would be with the pro version only wich is a bummer since i'm doing it for a school project and we can't pay for it as it would make a result based on money Wonderful, it's a very interesting thing to do ! Thanks for the info ! Imma share it with all people interested in that !

[@System22]

Glad to help Samishii00 - Be surer to check out my elementor hover playlist for plenty more onf these effects: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like and subscribe if you have not done so already - Thanks!

[@janbrase4227]

This was amazing! Makes a very cool effect so easy to accomplish without having to buy the premium version.

[@System22]

Glad to help Jan Brase - Check out our Elementor hover effect playlist for planty more: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like, share and subscribe if you have not done so already - Thanks!

[@josesibi]

@@System22 Thank you very much for the video. But when I try to do it on the free version it says I should still get the pro version. I did exactly as you mentioned in the video. Kindly help?

[@sriharsha2796]

Hi. I just added a text editor and an image in the slideshow. As soon as I change the text in paragraph setting to heading setting, it switches back to default color. And further I'm not able to change the color of the title. Can you please help me out? TIA!

[@System22]

Interesting, not come across that issue before. Not sure if this would help, but try clearing your builder cache: kzbin.info/www/bejne/eanFi36BYtl-jac -Please like, share and subscribe if you have not done so already - Thanks!

[@raghuramjc2798]

Hi, Deepawali greetings to you from India. I love your tutorials which present the solution with absolute clarity. I have a samll problem for which I am looking for solution. Using free version of Elementor in my local host. I have created a text to image hover on a card carousel - image on the background and image box for a header & text. All is working fine except that I want to resize the background image to a smaller size and centre it. All my efforts in finding the background image class (using Inspect) has failed. How do I achieve this? Your urgent revert will help me a lot. Thanks,

[@System22]

I'll look into it when I can Raghuram JC - Check out our playlist page for more videos on this: kzbin.infoplaylists - Please like, share and subscribe if you have not done so already - Thanks!

[@psvialli]

Many thanks , Could you explain how I can have a Image and when you hover over it a logo would appear , and the image greyscale a bit ? Thanks

[@System22]

Glad to help God Father - This video is not for Elementor but you can use the same CSS code: kzbin.info/www/bejne/Zn-5YYRtq9CSnrc - I'll do one on elementor soon - Please like, share and subscribe if you have not done so already - Thanks!

[@linzibee40]

perfect - thankyou!!

[@System22]

Glad to help LinziBee - Please like, share and subscribe if you have not done so already - Thanks!

[@VSongu]

Thank you, really good tutorial

[@System22]

Glad to help Vitaliy - Please like, share and subscribe if you have not done so already - Thanks!

[@Chris-ye4ww]

Thanks!

[@System22]

Glad to help Chris - Please like, share and subscribe if you have not done so already - Thanks!

[@polimediaproduction8750]

after doing this effect, how make it so that when i press on the image it brings me to another link.

[@System22]

Glad to help Poli Media Production - Just add a link to mthe image - Check out our Elementor hover effects playlist for more videos like this: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like, share and subscribe if you have not done so already - Thanks!

[@uptownphotography]

If you wanted the text at the bottom of the images how would you reposition it? Also I would like to add a see through background behind the text. Thanks and great video. Philip

[@System22]

Glad to help Uptown Photography - You would need to adjust with top padding or margin - I think I may have covered that in one of the videos on the Elementor Hove Playlist here: kzbin.info/aero/PLqabIl8dx2wqkGuqlL4RRLwJnBRO47jm2 - Please like, share and subscribe if you have not done so already - Thanks!

[@uptownphotography]

@@System22 Thanks very much! I can't test it right now as my site has been down 2 days and I get this message when I try to launch Elementor. "Error establishing a database connection" . My website is down also displaying the same message. Not sure why I can at least edit until the issue is resolved by my Yahoo webhosting, but I cannot get past the error message when trying to launch Elementor. I wish there was a way around this so I can at least continue to build my website. I gave you a Sub. Thanks. Philip

[@arniriede]

Great. Exactly what I was looking for. Will try it tomorrow. Does it also work with a slider/carousel (with the free version of Elementor)?

[@System22]

You could apply it to the text on the slider Arnika Riede - Please like, share and subscribe if you have not done so already - Thanks!

[@mc_deth7050]

Thank you so much. I have been looking for this help for weeks now, very much appreciated. Question: Do you think it would be possible to have two seperate areas show on image hover? For example, text on bottom of the image and text on the top that display on hover, both having black background. But the center of the image has no change, the image in centre does not display black. Think it is possible? Cheers

[@System22]

Glad to help Adrian McKenzie - Yes, I'll do a video on it in the next couple of days! - Please like, share and subscribe if you have not done so already - Thanks!

[@kathleenford3563]

Thank you for this, it was very easy to follow and awesome effects. However, following along exactly the image is not appearing. they are blank. Any ideas on where I went wrong?

[@System22]

Glad to help kathleen ford - Not sure without seeing it, you may want to try again! - Please like, share and subscribe if you have not done so already - Thanks!

[@kathleenford3563]

@@System22 I have done all that :). How would you like to see it? Basically when published, the image background we added does not show up. it is blank with the hover effects working.

[@mohammedamer7896]

Thanks. How do I link another page when an images is clicked

[@System22]

Glad to help @mohammedamer7896 - Select the text in the text module and turn it into a link with the link icon at the top - Check out our Elementor hover effects playlist for more videos like this: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like, share and subscribe if you have not done so already - Thanks!

[@mohammedamer7896]

Thajks. Also how do I change the height of a block in elemtor

[@zainabzaidi1525]

Hi! I suppose tinkering with the CSS code might help me, but I was hoping if you have a video on Elementor hover animation where if I hover over a title/text that’s on the right of a section, the image appears on the left somehow? Thanks

[@System22]

Glad to help Zainab Zaidi - May have to use javascript for something like that!Please like, share and subscribe if you have not done so already - Thanks!

[@laurenzmignolet4615]

Amazing video! Very useful, practical and straight to the point. CSS in description is a nice bonus, thanks!

[@System22]

Glad to help Laurenz Mignolet - Please like, share and subscribe if you have not done so already - Thanks!

[@hancsa100]

Hi! Thank you so much for your hard work and that you share your knowledge with us! I was looking for an other custom CSS code for buttons. Button slide up hover effect in Elementor Pro: The button is transparent and a background slide up on hover. Do you have any video in this theme? Thank you!

[@System22]

Glad to help hancsa100 - Here is my Elementor hover effects playlist: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like, share and subscribe if you have not done so already - Thanks!

[@oopitsmeagain]

Is it possible to implement this using TWO text boxes over the same background? I got the text boxes into the column okay, but the css makes it so that only one appears at a time when hovering.

[@System22]

Glad to help Lindsay Goldner - No, Unless you add both lots of text to the same text module! - Please like, share and subscribe if you have not done so already - Thanks!

[@ryanmurphy2701]

This is great! Thank you. Just one question - how do I make the background of the image darker when I hover over it so that the title pops? Thank you!

[@ryanmurphy2701]

Sorry! Never mind - you've answered it in your video! (sorry, I stopped a little earlier!) Thank you!

[@System22]

Glad you spottedf that! - Please like, share and subscribe if you have not done so already - Thanks!

[@danaodair8554]

Thank you for this amazing tutorial! I'd really appreciate if you answer my question: I followed all the instructions but the black background doesn't cover the whole column and I have a black square inside of the image. Thanks in advance for your help!

[@System22]

Check your column padding Dana Odair. Make sure it is set to 0 all around. - Please like, share and subscribe if you have not done so already - Thanks!

[@goodsamaritan2729]

For some reason transition-duration is not working for me, do you maybe know the reason? Thanks

[@System22]

Might try adding !important after the time to try and force it Ivan Šljivić - Please like, share and subscribe if you have not done so already - Thanks!

[@goodsamaritan2729]

@@System22 That worked, thanks! You got like and subscribe.

[@System22]

Awesome!

[@rw7799]

wait, doesnt hover effect do this withouth css? i wish you could just switch hover off and have an image with text option. on mobile user has to tap image to see text = not good ux

[@System22]

Just use a regular text module, add text, set the height you want using padding, then give it an image backgound - Job done!

[@nbarclay1000]

How do you do this with the free version?

[@System22]

Glad to help Naomi Barclay - Just put the CSS code into your Additional CSS Panel or where ever your theme allows. Most themes are Dashboard> Appearance>Customize>Additional CSS - Check out our Elementor hover effects playlist for more videos like this: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like, share and subscribe if you have not done so already - Thanks!

[@nidaa3233]

Can you please share how to create overlapping columns both horizontally and vertically?

[@System22]

Here you go: kzbin.info/www/bejne/Z32lan-ijcihh5Y

[@janineperez6090]

The CSS Code does not work on my site. I think it may be that I have a theme. I put in your exact code and it not working.

[@System22]

You might want to try again - This should work on any theme Janine Perez - Make sure you check your CSS class name - Please like, share and subscribe if you have not done so already - Thanks!

[@JJW008]

Hey there, great video the function works perfectly! Only issue I have been having is that when I first load in to my wordpress website the function doesn't work the first go. Once I refresh the page it begins to function as meant to. Any idea on how to fix this?

[@System22]

Not sure, you might try slearing your browser cache Josh Wihlborg - Please like, share and subscribe if you have not done so already - Thanks!

[@JJW008]

@@System22 Hey there, clearing the cache on my browser worked! Thanks loads :) Already subscribed ;) Also was wondering if there was a possible feature that could be implemented; I have multiple images like this on my website that when you hover, the text will appear. Is there a way to make it so that if you hover over one image and the text appears, all the images will do the same automatically?

[@System22]

I think there is a description on the plugin page of what's included in the free and paid versions. The paid version is stil in beta mode at the moment!

[@AniNijen]

Thank u! Only one question... I need to put a link on the image, how can I do it?

[@System22]

Glad to help Ani Nijen - Just put the link on the text module, even though it is invisible it is still there and will appear as a link on the image in the column - Please like, share and subscribe if you have not done so already - Thanks!

[@System22]

I made this video for you: kzbin.info/www/bejne/mnTOeqOMerqBqKM

[@fabienmadureira1195]

Hey, thanks a lot this ! :D Can you explain how can we make the text slide up from the bottom to appear? Is it possible ? Thanks :)

[@System22]

Glad to help Fabien Madureira - I made this video for you: kzbin.info/www/bejne/p5mqdHWZg8uYa7M - Please like, share and subscribe if you have not done so already - Thanks!

[@BaSampaiio]

I did everything right and it actually worked. My only problem is that the colors of Headline and text are different and I have no clue on how to solve that aaaaaah

[@System22]

Glad to help Bárbara S - I made this video for you: kzbin.info/www/bejne/qqKcqol9a56Ahrs Please like, share and subscribe if you have not done so already - Thanks!

[@mohammedamer7896]

how do i get rid of the pink labelFOLLOW ALONG WITH ALL -------- please. thx

[@System22]

Not sure I understand what you are asking @mohammedamer7896 - Check out our playlist page for more videos on this: kzbin.infoplaylists - Please like, share and subscribe if you have not done so already - Thanks!

[@Renate023]

Great, thanks! Do you have any solutions to make it fade again on second click on mobile?

[@System22]

Not that I know of

[@janewalshe2101]

have followed all the instructions to the letter (three times) but it's not working for me at all. Very strange.

[@System22]

Odd - Should be straight forward Jane Walshe - Check out our Elementor hover effects playlist for more videos like this: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like, share and subscribe if you have not done so already - Thanks!

[@janewalshe2101]

@@System22 agree, you make it completely simple and such a great easy video to follow, but the code doesn’t change anything when I paste it in. It’s ok I found a workaround this time but will use this on another site in future. Thanks 🙏

[@francis_ost]

Hey, thank you for the marvelous tutorial! Would you maybe answer one question from me? I used the effect to create an index-site. Now I need the images in the background of the column to be clickable- to set a hyperlink on them.How would I do that? Thanks so much in advance.

[@System22]

Made this video for you, hope it helps Franziska Ostermann - kzbin.info/www/bejne/haHCg5-Kqqahmtk - Please like, share and subscribe if you have not done so already - Thanks!

[@charoulakantourou2621]

Thank you for the great video! Is it possible to add a "scale on hover" effect on the background image too?

[@System22]

Not sure about that Charoula Kantourou - Please like, share and subscribe if you have not done so already - Thanks!

[@jbdelacruzdigital]

Thank you

[@System22]

Glad to help JB Digital - Please like, share and subscribe if you have not done so already - Thanks!

[@shaighan8657]

Where can we get this code ?

[@System22]

Glad to help Shaighan - It's under the video in the description - Please like, share and subscribe if you have not done so already - Thanks!

[@iamagelessiam]

is there a way to leave the title visible all the time and the subtitle to only appear on hover?

[@System22]

Glad to help Bm K - Easiest way would be to add the title to the image with a graphics program - I'll see if I can figure out a way of doing it with CSS when I have some time! - Please like, share and subscribe if you have not done so already - Thanks!

[@white.reviews9923]

Hi i followed your instructions but nothing happened! Since i'm using free elementor i copied and paste the code directly in additional css Astra Theme but unfortunately nothing happened ! Please help.

[@System22]

Sorry I don't use Astra - There should be somewhere on there to apply custom CSS!

[@baptistenmunster1007]

did u give ur text-editor the "imt"-class?

[@neekopeeko805]

Hi, thanks for the vid! Do you have a custom CSS that would apply to just text? I'd like to have a low opacity text transition to full opacity when hovering over the text. No images. The CSS provided in this video mostly works, except the live site doesn't seem to recognize the non hover opacity of .3, its simply transparent (as if set to 0.0). Thanks! Im using this currently: .imt { opacity:.3; transition-duration:1.5s; } .imt:hover { opacity:1; }

[@System22]

Glad to help Nikolai - That looks like it should work! I made this video for you: kzbin.info/www/bejne/kKObgKGBnquqsMk - Please like, share and subscribe if you have not done so already - Thanks!

[@raviharyob8477]

thanks bro

[@System22]

Glad to help ravi Haryo B - Please like, share and subscribe if you have not done so already - Thanks!

[@adied7725]

Hi Great video thanks:) interested to know how to hover effect on text.? Hover text show video background on hover please thanks

[@System22]

Glad to help Adie D - Please like, share and subscribe if you have not done so already - Thanks!

[@deepakgoswami197]

how can i add slide up image over lay??

[@System22]

Glad to help DEEPAK - Here you go: kzbin.info/www/bejne/r6HcgoR_qaedaLs Please like, share and subscribe if you have not done so already - Thanks!

[@annemiejanssen9921]

Hi, thanks so much for the video, it really saved me a lot of time! However, I'm coming across an issue.. My background image appears repetitively (as tiles) instead of one image. Would anyone know a functional "additional CSS" code to not repeat the background? I have used this so far but no success.. .norep { background-repeat:no-repeat; } Ps, I'm using the free version of elementor

[@System22]

Make sure you have your image set to cover and no repeat in the image settings Annemie Janssen - Please like, share and subscribe if you have not done so already - Thanks!

[@S0ulH0und]

Is it possible to make that so when you hover over one element, there are changes in the other?

[@System22]

Not without some serious Javascript coding S0ulH0und - Please like, share and subscribe if you have not done so already - Thanks!

[@terrencejames7219]

This is a cry for HELP… I have tried repeatedly to apply a background color to a Elementor Pro Premium Banner text, NOT a HEADING TEXT as most tutorials cover. Can anyone help

[@System22]

Glad to help Terrence James - Just add this code to your custom css box, change the color and padding to what you need! .premium_banner_content { background: blue; padding:20px; } Please like, share and subscribe if you have not done so already - Thanks!

[@jiwodamarjatisuryono8558]

it said css custom for pro only Edit: thankyou it already works

[@System22]

Glad to help Jiwo Damar Jati Suryono - Please like, share and subscribe if you have not done so already - Thanks!

[@tomasbroz2900]

add a picture, name its class with homepage-img and then add this code in additional css: .homepage-img :after { content: "hello" !important; position: absolute; z-index: 99 !important; color: white !important; top: 50%; left: 50%; transform: translate(-50%, -50%); }

[@System22]

Great tip Tomas Broz - Please like, share and subscribe if you have not done so already - Thanks!

[@tomasbroz2900]

@@System22 done:)

[@MrMundharmonikah]

Ding Dong Digga!

[@System22]

Glad to help MrMundharmonikah - Check out our Elementor hover effects playlist for more videos like this: kzbin.info/www/bejne/q5LGi6ePZbSGatU - Please like, share and subscribe if you have not done so already - Thanks!

[@MDRAIHANUAE]

thanks now new video upload

[@System22]

Glad to help MD RAIHAN - Coming soon! - Until then check out my playlist videos: kzbin.infoplaylists?view=1&sort=dd&shelf_id=0 - Please like, share and subscribe if you have not done so already - Thanks!