Jump to content

Reversing hover effects W3-css


sarahfoxnz
 Share

Recommended Posts

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 ?

 

Link to comment
Share on other sites

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 by sarahfoxnz
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...