CMS Development

ncortazzo
Teilnehmer/-in

Need help creating CSS for hover functionality

lösung

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 Akzeptierte Lösung
AJLaPorte_diagr
Lösung
Autorität

Need help creating CSS for hover functionality

lösung

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

Lösung in ursprünglichem Beitrag anzeigen

7 Antworten
AJLaPorte_diagr
Lösung
Autorität

Need help creating CSS for hover functionality

lösung

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
Teilnehmer/-in

Need help creating CSS for hover functionality

lösung

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
Autorität

Need help creating CSS for hover functionality

lösung

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
Mitglied

Need help creating CSS for hover functionality

lösung

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
Teilnehmer/-in

Need help creating CSS for hover functionality

lösung

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
Autorität

Need help creating CSS for hover functionality

lösung

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
Teilnehmer/-in

Need help creating CSS for hover functionality

lösung

Hi AJLaPorte, 

 

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

0 Upvotes