Hover Opacity

Tagged: 

This topic contains 3 replies, has 3 voices, and was last updated by  Sebastian 7 years, 4 months ago.

Author Posts

robertlo

How can I set hover opacity in MT? I see opacity in behavior, but I’m assuming that’s general opacity, and not just opacity on hover. So how can I set hover opacity, or is that possible in MT?


Sebastian

Hi Robert,

Yes you can do both things with MT.
To create a hover state try this:
1. duplicate a selector you want to add a hover state to.
2. click on the selector name in the top bar. In the selector options you can see ‘CSS Selector Code’. Add :hover at the end of whatever code is there. Now style selector’s hover state.

To change opacity of shadows, text, or backgrounds use rgba values in colour fields e.g. rgba(215, 106, 44, 0) the fourth number relates to the opacity, where 0 means invisible and 1 is full colour. You must include both the rgba and the brackets.

Btw if you want to style visited links, or active states you can use other pseudo classes the same way as the hover states simply add those extensions :visited, :active. You can find out more about them here: http://www.w3schools.com/css/css_pseudo_classes.asp

Please let me know if that helps and if you need anything else.

Monika


robertlo

So do I have to manually enter the CSS code for a:hover , or is there someway to select that in MT’s GUI? I still don’t see anything in MT background settings that let you set an opacity?


Sebastian

Hi Robert,

I’ve responded to your question about hover on the other thread here: https://themeover.com/forum/topic/create-styles-to-apply-wherever/#post-6811

If you copy and paste this into the background color field:

rgba(215, 106, 44, 0.5)

It will apply a background color with 50% opacity – because of the 0.5 at the end. You’ve stumbled across another feature that’s in need of updating to make applying RGBA (color codes that support opacity) values easy.

Cheers,
Sebastian

You must login or register to reply to this topic.