Elementor hover effects image to text on hover | Elementor tips and tricks

Подписаться 21 тыс.

Просмотров 40 тыс.

50% 1

Start work with me for any wordpress project?
Contact me - farjana-rashid.com/
In this quick tutorial I will show you how to create card hover effect using Elementor Pro. Here I have used all elementor features and some small CSS code.
✅ Get Elementor Pro:
farjana-rashid.com/elementorpro
✅ Get Domain & Webhosting(60% off):
farjana-rashid.com/bluehost
✅ Hire professional Logo designer from Fiverr:
farjana-rashid.com/fiverr
✅ Get CSS Code:
farjana-rashid.com/card-hover...
Social:
Facebook Group : / createwebsitelikeapro

Опубликовано:

21 сен 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 51

@marshadingle3550 Год назад

Thanks so much Farjana! I scrubbed the entire internet looking for something like this and couldn't find it. I tweaked the css to make a custom flyout menu without having to use a pop up! You should do a video on hover/flyout menus. You'd get lots of traffic because nothing like that seems to exist. So great and good luck to your channel!

@joelguerin6821 4 месяца назад

Works with containers too. Just treat them like the columns in this video. Great job, Farjana!

@nandrz Год назад

This is Exactly what I was looking for. Thanks 🙏

@sujankumar7076 5 месяцев назад

Absolutely Amazing Content for Hover Text under the Images. It's really working smoothly. Thanks a lot Farjana!!!

@dwikykasih3781 2 года назад

THANK YOU SO MUCH! You solved my problem

@eklego2032 2 года назад

I love it, please keep on creating these tutorials they are awesome

@farjanarashid644 2 года назад

Thanks, will do!

@sidneyjohnson6895 2 года назад

A sweet to the point tutorial. Creative! 1st like on this one - Keep it Pushing, Farjana!!!

@farjanarashid644 2 года назад

Thank you! Will do!

@i.am.jordan Год назад

Thank You very helpful

@peanutduck76 Год назад

Thank you for this smart code, Farjana! Do you know if it works with the containers as well?

@abdulrauf-eh8iq Месяц назад

Excellent Work

@md.lokeman523 2 года назад

Awesome Boss! Many Thanks.. Increasing my skills.

@farjanarashid644 2 года назад

You're most welcome

@user-gw9jx9yu8k 4 месяца назад

Thank you very much✌

@alhikmahresearch6413 Год назад

THANK YOU SO MUCH! You solved my problem THANK YOU SO MUCH! You solved my problem THANK YOU SO MUCH! You solved my problem

@farjanarashid644 Год назад

My pleasure!

@Tserang Год назад

HI very nice, could you make it that the background is also growing slowly instead of just appearing

@dolon7099 2 года назад

WHY CSS CODE NOT AVAIABLE ON WEBSITE ANYMORE

@sulemanhassan681 2 года назад

Can we create a slider like this?

@subornoroy12 2 года назад

Very useful video.

@farjanarashid644 2 года назад

Thanks a lot

@asifislam6866 2 года назад

Carry on sister....I am from Bangladesh.now I am waiting for update cls🥰🥰🥰

@farjanarashid644 2 года назад

I will try my best

@vijaysingh610 Год назад

Please make a video on how to make this on divi

@duniabinatangnew Год назад

thanks for the tutor, but your site is down now. I can't copy your code. thanks

@vinaygudipati3380 2 года назад

then how to add for free elementor version

@inneractive 2 года назад

Does anyone know how to code the Custom CSS for the free version? Using the code provided in Farjana's video doesn't work in the free version. I see instructions in Hindi below. Hoping someone can translate (Google translate was having a hard time with that one!).

@AhtishamJaveed-bl1gx Месяц назад

css is not applicable in free elementor just available in elementor pro

@nielsnet4169 2 года назад

Doesnt work on my end...

@user-ou3gs6iw8i 10 месяцев назад

css code is not working

@solutechcore 2 года назад

Good video

@AliImran-kt9xk 2 года назад

How to do this in divi ?

@farjanarashid644 2 года назад

Almost same process. I will try to make a video for Divi.

@AliImran-kt9xk 2 года назад

@@farjanarashid644 please do it ❤️

@AliImran-kt9xk 2 года назад

@@farjanarashid644 same script will be used ?

@janetrechel 2 года назад

i added the code to custom css of the theme and its not working... i have the free version ...will it work only with elementor pro?

@farjanarashid644 2 года назад

Yes works only on Pro.

@bandihari2433 2 года назад

it works on pro

@mhitrajput7124 2 года назад

it's also work on free elemntor follow this step - 1. Phle section k ander joo column hai usko class ya id doo. 2. Uske baad heading ko h3 ya h4 kush bi rkho 3. Uske baad Desboard pe jaoo then open customize teb then goo too addition css setting and target class (Joo vi class ya id name diya hai column ko boo target kro) .name h3 { Display: none; transition: all ease. 05s; } .name:hover h3 { Display: block; } .name p{ Display: none; transition: all ease. 05s; } .name:hover p { Display: block; }

@inneractive 2 года назад

@@mhitrajput7124 English instructions?

@juliana_s8313 2 года назад

@@inneractive IDK if you still need this. Follow the steps in the video. But when it comes to adding code to the Custom CSS Pro feature, provided you only have the free version, go to Appearance > Customize > Additional CSS...then paste the code there. I gave an ID name to my inner section and just replaced the 'selector' with the ID name.