CMS Development

ncortazzo
Participant

Need help creating CSS for hover functionality

SOLVE

I'm working on a landing page right now, and I'd love to be able to have specific images on the page transform into text when a visitor hovers their mouse over those images. I'm no good with writing CSS code. Can someone please help me out?

0 Upvotes
1 Accepted solution
AJLaPorte_diagr
Solution
Key Advisor

Need help creating CSS for hover functionality

SOLVE

Hey Ncortazzo,

 

We'll need some more information on this in order to provide better help. 1) Do you have a link (or preview link) to the site? Also, 2) we need you to expand on what it is you are looking to achieve in the image to text.

 

Are you simply looking for someone to hover over an image and text appears over it? 

Such as this: https://codepen.io/ajwsol/pen/JLRRMK

View solution in original post

7 Replies 7
AJLaPorte_diagr
Solution
Key Advisor

Need help creating CSS for hover functionality

SOLVE

Hey Ncortazzo,

 

We'll need some more information on this in order to provide better help. 1) Do you have a link (or preview link) to the site? Also, 2) we need you to expand on what it is you are looking to achieve in the image to text.

 

Are you simply looking for someone to hover over an image and text appears over it? 

Such as this: https://codepen.io/ajwsol/pen/JLRRMK

BSA
Participant

Need help creating CSS for hover functionality

SOLVE

This is so helpful, but I'm a real neophyte. Can you tell me how the CSS integrates into the html? For example, how do I take this picture and have the words "this is a flower" appear when I hover over it:: https://c.pxhere.com/photos/29/c7/flower_purple_lical_blosso_beautiful_beauty_bloom_blooming-1328279... \

 

 

0 Upvotes
AJLaPorte_diagr
Key Advisor

Need help creating CSS for hover functionality

SOLVE

Hi @BSA,

Sorry for the delay in getting this to you. If you look at this updated codepen you can see it with your image: https://codepen.io/ajwsol/pen/WKjBza

 

You would simply replace the image with whatever image you wanted and then add your desired text into the div with the class of text. 

0 Upvotes
NotoriousBMG
Member

Need help creating CSS for hover functionality

SOLVE

Can this code be modified to create a color change on hover for my home page navigation Icons?  In other words, take them from black/gray to our brand red?  My concern is that people may not realize they are nav icons since they are static on hover.

Thanks!

BSA
Participant

Need help creating CSS for hover functionality

SOLVE

Hi, thanks for this. I don't know how the html and css integrate. I'm beginning with a rich text module and would to know how to integrate both into what I'm working in - perhaps that's my issue. I am truly a neophyte with all this.

0 Upvotes
AJLaPorte_diagr
Key Advisor

Need help creating CSS for hover functionality

SOLVE

Hi @BSA,

 

Your best option for this is to create a custom module for this kind of thing. It would allow the ability to reuse it as needed. If you are unable to do so, with using a rich text module you would have to go into the view source option on the WYSIWYG (looks like this:  </>  ) and manually add the code there. Then you would want to add the content from the "CSS" portion of the frame on the codepen to your stylesheet (which you can also find in the Design Manager).

 

If you have any additional questions, please don't hesitate to ask. 

-AJ 

 

 

0 Upvotes
ncortazzo
Participant

Need help creating CSS for hover functionality

SOLVE

Hi AJLaPorte, 

 

Yes, that effect is precisely what I was going for. Thanks for linking me to this page!

0 Upvotes