topic Re: Need help creating CSS for hover functionality in CMS Development

Need help creating CSS for hover functionality

ncortazzo — Fri, 16 Mar 2018 17:53:05 GMT

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?

Re: Need help creating CSS for hover functionality

AJLaPorte_diagr — Fri, 16 Mar 2018 18:55:15 GMT

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

Re: Need help creating CSS for hover functionality

ncortazzo — Fri, 13 Apr 2018 14:06:26 GMT

Hi AJLaPorte,

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

Re: Need help creating CSS for hover functionality

BSA — Thu, 12 Jul 2018 14:33:40 GMT

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.jpg!d \

Re: Need help creating CSS for hover functionality

AJLaPorte_diagr — Tue, 24 Jul 2018 15:17:28 GMT

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.

Re: Need help creating CSS for hover functionality

BSA — Tue, 24 Jul 2018 18:17:45 GMT

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.

Re: Need help creating CSS for hover functionality

AJLaPorte_diagr — Tue, 24 Jul 2018 18:30:31 GMT

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

Re: Need help creating CSS for hover functionality

NotoriousBMG — Tue, 14 Apr 2020 14:17:17 GMT

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!