Jump to content

CSS Tip 1: Hover fade


Morrigan
 Share

Recommended Posts

  • Admin

When making an element that you want to change on hover a quick extra line to each element will make it look smooth.

 

Note: You can use this for all things that both change on click on hover etc.

 

Add to your CSS elements (both the original and the hover element) the following:

transition: all ease 0.3s;

You can change each element but this common trick is for a fading effect from one thing to another. Like background or text color (or both!). Try it out:

 

a {
color: #000;
background: #ae0a5f;
transition: all ease 0.3s
}
a:hover {
color: #ae0a5f;
background: #000;
transition: all ease 0.3s
}

 

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to comment
Share on other sites

  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.