No video :(

Cool team member area with nice hover effect | elementor tips and tricks

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

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

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 design team member area in a different way. And also will add a nice hover effect with that using simple CSS.
✅ 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/design-tea...
Social:
Facebook Group : / createwebsitelikeapro

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

12 окт 2021

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@selflearnersbd Год назад

Thanks you so much 🥰

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

Great and thank you, however I couldn't apply since I activated the new container option; could you assist me or tell me if you've previously created a similar video for this?

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

Beautiful. Subscribed.

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

Thanks for the sub!

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

Can we make it work for carousels? if yes then please let me know

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

Great

@sannicsan Год назад

Nice

@toufickhan Год назад

Is It work for container? Apu

@TheShlepshitz 25 дней назад

Hey for me it doesn't work - I deactivated the container thing. But elementor gives me some error

@GlobalBestie Год назад

why the mobile version only shows one image? URGENT, pls help

@jaisharma917 Год назад

To make this work on live, you need to replace the 'selector:before' with some specific css class name. like 'team1:before' for 1st item. also remember to add 'team1' as css name in 'CSS classes' for the column.

@markusbreuniger Год назад

thx will try

@markusbreuniger Год назад

sorry its not working live

@jaisharma917 Год назад

@@markusbreuniger add css class to each column and custom css for that css class. it is working. I have checked

@markusbreuniger Год назад

@@jaisharma917 can you send me the css code here?

@jaisharma917 Год назад

@@markusbreuniger .team1:before{ content: ""; width: 4px; height: 85px; background: #FCB900; position: absolute; right: 0; z-index: 0; transition:1s; } .team_member:hover .team1:before{ width: 110%; } I have done this for each of the items in portfolio. naming each as team1, team2, team3.... I hope this will help

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

Would you please make a website on Salon booking *All beautician names *Their work profile *Appointment /pre booking etc *Mobile app *Verify msg /appointment verify msg on number *Discount offer etc *Admin commisions from salons to published their names in site And want to know how admin will earn or manage their site etc

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

Well don and Kudos Fajan. The hover effect does not work once the website is live. It only works within the the Elementor editor. Can you help?

@Ing.IsaiasTunque Год назад

copia y pega esto : .team1:before{ content: ""; width: 4px; height: 85px; background: #FCB900; position: absolute; right: 0; z-index: 0; transition:1s; } selector:before{ content: ""; width: var(--border_width); height: var(--height); background: var(--color); position: absolute; right: 0; z-index: 0; transition:var(--time); } .team1:hover:before{ width: 110%; } Cambia team_member por team1 ; va a funcionar

@nucleusexhibitionuae Год назад

class name : team_membe _____________________________ css code : :root{ --color: #F2C34B; --border_width: 4px; --height: 85px; --time: 1s; } .team_member:before{ content: ""; width: var(--border_width); height: var(--height); background: var(--color); position: absolute; right: 0; z-index: 0; transition:var(--time); } .team_member:hover:before{ width: 110%; }

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

Hello farjana, your website is expired, I can't get the code snippet, I tried to type it but i'm having errors. Can you help me with it?

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

Worked on elementor but didn't work in browser when viewing page

@markusbreuniger Год назад

Same here

@GlobalBestie Год назад

Not showing on the desktop as well!!!!!!!

@markusbreuniger Год назад

It didn't work out side Elementor editor. Do you know why?

@nucleusexhibitionuae Год назад

@mkpoutoeddy312 Год назад

For it to work live change your CSS class name to *team1* in Inner Section then copy and paste the code below into the Custom CSS in column .team1:before{ content: ""; width: 4px; height: 85px; background: #FCB900; position: absolute; right: 0; z-index: 0; transition:1s; } selector:before{ content: ""; width: var(--border_width); height: var(--height); background: var(--color); position: absolute; right: 0; z-index: 0; transition:var(--time); } .team1:hover:before{ width: 100%; }

@nucleusexhibitionuae Год назад

no it's class name : team_membe _____________________________ css code : :root{ --color: #F2C34B; --border_width: 4px; --height: 85px; --time: 1s; } .team_member:before{ content: ""; width: var(--border_width); height: var(--height); background: var(--color); position: absolute; right: 0; z-index: 0; transition:var(--time); } .team_member:hover:before{ width: 110%; }

@nucleusexhibitionuae Год назад

first thank you for the tutorial but at the end its not working in live view so i was need to fix it and its fixed so that's what we need to write class name : team_membe _____________________________ css code : :root{ --color: #F2C34B; --border_width: 4px; --height: 85px; --time: 1s; } .team_member:before{ content: ""; width: var(--border_width); height: var(--height); background: var(--color); position: absolute; right: 0; z-index: 0; transition:var(--time); } .team_member:hover:before{ width: 110%; }