Hi Mattis,

I think you will have the most luck by first specifying the target text box ID, found in the right-hand properties pane under Element Metadata, and then specifying the target descendant. 

For example, if you are looking to target tags within your text box ‘#lp-pom-text-397’, it could be done like this:

#lp-pom-text-397 a:hover {color:blue;}



  #lp-pom-text-397 h6:hover {color:blue;}<br />



#lp-pom-text-397 p:hover {color:blue;}

Also, I’ve created a demo page where you can see the hover effect in action: http://unbouncepages.com/link-hover/

Hi Noah,

Might be interesting design aesthetic to have a slight shadow over an image and upon mouse hover, have the slight shadow go away to show natural image brightness. 

Appreciate the guidance!

Thanks,

Joe

Hey Joe,

You should be able to use the ‘Brightness’ Webkit filter for this. Here’s an example of how this would be used with an image element:

#lp-pom-image-56:hover {



 filter: brightness(15%);



 -webkit-filter: brightness(15%);}

For a nice transition, the following can be added:

#lp-pom-image-56 { 



 -webkit-transition: all 1s ease;



 -moz-transition: all 1s ease;



 -o-transition: all 1s ease;



 -ms-transition: all 1s ease;



 transition: all 1s ease; }

I’ve added some more examples of image hovers to the following page: http://unbouncepages.com/link-hover/

Update : added the filter property for Firefox support.

Hey Noah,

Hope you are having a good weekend!  Awesome support!  FYI I am only seeing the ‘opacity’ one working properly when I go to the page in Mozilla Firefox.  Could just be an issue with my browser.  Either way, top notch ability to make landing page elements unique.

Thanks,

Joe

Good catch Joe. Just added the ‘filter’ property which should take care of Firefox support!

Hey, I just attempted to use the grayscale hover code but it’s not working and the code is showing up at the top of my landing page when I save it. What gives?