How do I make these hover effects in WordPress?

[barney238]

I have a client who wants a website that looks like the first section, below the header, on the Merck for Mothers website (it seems I cannot post the link).

The cards and the hover effects. I looked for a theme that could provide that but was not lucky given the time limitations. I settled for GeneratePress and Elementor, but none seem to be giving me what I need. For starters, WordPress has a separate placement for captions, etc. I know it can be achieved with some custom CSS and Javascript, but my coding skills are still very elementary. Can someone help me here?

 

[barney238]

Website link is merckformothers dot com

I have a client who wants a website that looks like the first section, below the header, on the Merck for Mothers website (it seems I cannot post the link).

The cards and the hover effects. I looked for a theme that could provide that but was not lucky given the time limitations. I settled for GeneratePress and Elementor, but none seem to be giving me what I need. For starters, WordPress has a separate placement for captions, etc. I know it can be achieved with some custom CSS and Javascript, but my coding skills are still very elementary. Can someone help me here?

 

[Aleks405]

Search for how to change opacity on hover!

 

[helloyes]

That website is a joke.. excuse my language.. and you can accomplish a hover effect and type animation much more complex.

It's about the plugins you use.. when you get a theme. Their should be custom plugins included with them. That's how you know you are on the right track

 

[barney238]

No need to apologise. I am not a fan of it either, but that's what the client wants.

With plugins, I tend to minimise the use of those -- they add a lot of bloat and slow down websites. This is a website I am already putting together with a page builder. Usually I prefer tweaks using codes and only use plugins when its absolutely necessary.

That website is a joke.. excuse my language.. and you can accomplish a hover effect and type animation much more complex.

It's about the plugins you use.. when you get a theme. Their should be custom plugins included with them. That's how you know you are on the right track

 

[barney238]

It's a bit more complicated than that, though. Has to display a description or whatever that is on hover too, etc.

Search for how to change opacity on hover!

 

[mickyfu]

No need to apologise. I am not a fan of it either, but that's what the client wants.

With plugins, I tend to minimise the use of those -- they add a lot of bloat and slow down websites. This is a website I am already putting together with a page builder. Usually I prefer tweaks using codes and only use plugins when its absolutely necessary.

So your coding skills are not good, but you do not want to use a plugin. Well I'd guess you are a little stuck. Because I doubt anyone could give you an actual answer without having access to the site. Personally I think something like Visual Composer, or Divi theme would be your easy answer. Other than that, due to your limited skills, I'd hit someone up on Fiverr and get them to do the job, charge your client double.

 

[helloyes]

No need to apologise. I am not a fan of it either, but that's what the client wants.

With plugins, I tend to minimise the use of those -- they add a lot of bloat and slow down websites. This is a website I am already putting together with a page builder. Usually I prefer tweaks using codes and only use plugins when its absolutely necessary.

Honestly, I didnt know it was your site. keep it up, you''ll get better, its not bad.
what you are asking for is extremely simple....and many site have that section in its template database.

My advice right now. Download elementor plugin and use it as a page builder. I will PM you the all in on plugin you need.

 

[James Tora]

Supposing that you have limited coding skills. Go for wp-bakery page builder plugin.
Create div as many as you want with same class and 2 data attributes for each div. one is for image and the other is for description.
Using jquery, just assign data attribute to its html on mouse hover and vice versa.
You are done

 

[barney238]

Can Elementor do that? I have a subscription for that and if it does would prefer to start with that before buying another page builder.

Supposing that you have limited coding skills. Go for wp-bakery page builder plugin.
Create div as many as you want with same class and 2 data attributes for each div. one is for image and the other is for description.
Using jquery, just assign data attribute to its html on mouse hover and vice versa.
You are done

 

[James Tora]

Can Elementor do that? I have a subscription for that and if it does would prefer to start with that before buying another page builder.

Surely, you can do it in any page builder.

 

[barney238]

Thank you!

Supposing that you have limited coding skills. Go for wp-bakery page builder plugin.
Create div as many as you want with same class and 2 data attributes for each div. one is for image and the other is for description.
Using jquery, just assign data attribute to its html on mouse hover and vice versa.
You are done