html - Hover Colour making Headers unreadable -


I'm trying to get an effect like this website, when the content is hidden on it, then a yellow color The color of it consumes and color of the header change. When I tried to recreate this effect my headers became unreadable. Jsfiddle.net/m8z25

  .content1: hover, .content2: hover, .content3: hover, .content4: hover, .content5: hover, .content6: hover {background color: white; Opacity: 0.30; Transition: .2s; WebKit-Infection: .2s; Webkit-Infection: All 500ms Easy; } H1: Hover {Color: Black; } h2 {color: red; Status: Completed; Bottom: -10; Padding-left: 30; } h1 {color: black; }    

It is not 100% clear that what you are trying to achieve here ...

What can I tell? It almost becomes ineffective because you are adding opacity to the content container. It affects all the content (including the background) so that everything gets faded

What you have depends on the content container (your site background).

On the site where you do not use ambiguity to change the demo-ed anything, I think it only changes the color of the background with a light purple dark purple color

Opacity: 0.30; and try updating the background / text color instead. P> Use the opacity to change versus color by looking for example ...

Comments

Popular posts from this blog

Java - Error: no suitable method found for add(int, java.lang.String) -

java - JPA TypedQuery: Parameter value element did not match expected type -

c++ - static template member variable has internal linkage but is not defined -