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
Post a Comment