How to do hovering images?
Replies
I made some pet buttons, but I to it be fade and "un-fade" when I hover over it. Can someone explain me?
Here's how you can add a fade/unfade effect to your pet buttons!
/Before Hover/
img {
opacity: .NUMBERVALUE;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;}
/After Hover/ img:hover { opacity: 1;}
For the opacity before hover, make sure to include the decimal before your number value! Without the decimal, your image will remain at 100% opacity/unfaded. If you choose .1 as your number value, your image will be nearly completely faded before hover, but if you choose a higher number, such as .8 or .9, your images will hardly be faded at all. I recommend starting at .5 for your value, and playing around with it from there -- whether you want the image to be more or less opaque before hovering over it! You can also change the number on the opacity for the hover effect to be a decimal value, if you wish!
Also! I included a transition within the code, which will control how fast your image unfades. You can change the all of the "1s"es to a higher value (such as "2s" or "5s") if you want the fade to be slower. If you want the unfading to be instant just remove everything after "opacity: .NUMBERVALUE;" in the before hover section , except for the closing bracket.
If you don't want the hover effect on other images within your profile (such as the mail user and friend request buttons), just put these tags around the text for your pet buttons:
<div id="petbuttons">
PET BUTTONS GO HERE
</div>
and add this in front of "img" and "img:hover" in the previous code:
Sorry for being awfully long winded, but I tried to explain everything as fully as possible!! Let me know if you have any questions -- I'd be happy to help.