CMS Development

ncortazzo
Participant

I want to have an image change into text when a user hovers over it

SOLVE

I need help creating some code for a feature like this. I'm creating a pillar page, and on the page (seen here) there is a section related to training methodologies, where I've laid out several icons. Basically, I want the icons to disappear in some way when a user hovers their mouse over the icons, and have the space where each icon was replaced by text. 

 

For example, here's one icon:

Speech bubble.jpg

 

When someone hovers their mouse over it, it should then turn into text.

 

Any help would be greatly appreciated!

0 Upvotes
1 Accepted solution
Josh
Solution
Recognized Expert | Platinum Partner
Recognized Expert | Platinum Partner

I want to have an image change into text when a user hovers over it

SOLVE

Hi @ncortazzo,

 

 

@AJLaPorte_diagr provided some additional info over here: https://community.hubspot.com/t5/Content-Design-Questions/Need-help-creating-CSS-for-hover-functiona...

 

I'd also second the resources that @edjusten provided.

 

 




Did this post help solve your problem? If so, please mark it as a solution.

Josh Curcio

HubSpot support and inbound marketing for OEMs, contract manufacturers, and industrial suppliers.
HubSpot Platinum Partner & HubSpot Certified Trainer

View solution in original post

2 Replies 2
edjusten
HubSpot Employee
HubSpot Employee

I want to have an image change into text when a user hovers over it

SOLVE

Hi @ncortazzo  Apologies no one has reached out to you yet. Hover effects are usually triggered by CSS, so this is where I would turn for further advice. A qucik google search revealed these nifty CSS hover tutorials: 

 

8 Simple CSS Hover Effects

 

Three Awesome CSS Hiver Transition Animations

 

W3 Schools Hover Transition tutorial

 

Tagging a few of our partners for further guidance, @Josh @Anton101 and @stefen?

 

Thank you,

Ed Justen

 

 

 


Did my post help answer your query? Help the Community by marking it as a solution
0 Upvotes
Josh
Solution
Recognized Expert | Platinum Partner
Recognized Expert | Platinum Partner

I want to have an image change into text when a user hovers over it

SOLVE

Hi @ncortazzo,

 

 

@AJLaPorte_diagr provided some additional info over here: https://community.hubspot.com/t5/Content-Design-Questions/Need-help-creating-CSS-for-hover-functiona...

 

I'd also second the resources that @edjusten provided.

 

 




Did this post help solve your problem? If so, please mark it as a solution.

Josh Curcio

HubSpot support and inbound marketing for OEMs, contract manufacturers, and industrial suppliers.
HubSpot Platinum Partner & HubSpot Certified Trainer