Reversing hover effects W3-css

[sarahfoxnz]

https://www.w3schools.com/w3css/w3css_effects.asp

 

Hello. I'm wondering if there is a REVERSE of the hover effects.

Currently i've got it on w3-hover-red  -  changing it to a red background if i hover over a div area. But what i'm after is to put 3-4 divs side by side (i can do this) - but have them using grayscale or opacity as default, and when i hover over the divs, it will display "normal" (not grayscale/opacity),

has anyone tried this technique ?

 

[JMRKER]

Show some example code of what you have done as a starting point.

How do you want it to differ from the example link you gave?

 

[sarahfoxnz]

Ive worked it out .  added the following classes to the CSS,

 

.w3-reverseopac{opacity:0.54}
.w3-reverseopac:hover{opacity:1.00}

(reverse opacity)  

and on the main template

 

<td class="w3-red w3-reverseopac">
	Text to include
	</td>

Edited September 13, 2019 by sarahfoxnz