<head>

   <title>Hovering Effect for Link</title>
   <style>
       body {
           background-color: #EEE;
           margin: 50px;
       }
       
       h1, h2, li, p {
           font-family: sans-serif;
       }
       
       h1, h2 {
           color: rgba(255, 255, 255, 0.85);
           background-color: #000000;
           /*display: inline-block;*/
           padding: 10px;
       }
       
       li, p {
           margin-bottom: 30px;
           font-size: 24px;
       }
       
       #list1 a {
       /* this changed the link to a different tint of blue and removed the default link underline */
           color: #0066FF;
           text-decoration:none;
       /* no animation is done when this line as added alone.  This because not all CSS properties can be animated.
           see: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties for a list of animatable properties
           the workaround here is to animate a border property instead*/
           transition: all .2s ease-out;
       /* notice we used 'all' instead of calling out the specific property.
           since this is not a complex task, performance change is minor */
       }
       
       #list1 a:hover {
       /* this adds and underline only when hovering over the link */
       /* 
           text-decoration: underline;
                                           -- not using this as it cannot be animated */
       /* the alternative fix to the transition in "li a" */
           border-bottom: 4px solid #0066FF;
       }
       
       /* transition: all .2s ease-out & border-bottom: 4px solid #0066FF will show the bar be introduced fading from top-to-bottom
           this is because it is animating the width of the bottom bar, expanding vertically */
       #list2 a {
           color:#0066FF;
           text-decoration: none;
           transition: all .2s ease-out;
       /* making the border already present means it doesn't fade in top-to-bottom.  instead, manipulate opacity */
           border-bottom: 4px solid rgba(0, 102, 255, 0);
       }
       #list2 a:hover {
           border-bottom: 4px solid rgba(0, 102, 255, 1);
       }
       
       #list3 a {
           color: #0066FF;
           text-decoration: none;
           transition: all .2s ease-out;
       /* padding is added to give the light blue background more space to be seen larger */
           padding: 3px;
       }
       
       #list3 a:hover {
           background-color: #B5E1FF;
       }
       
       #list4 a {
           color: #0066FF;
           text-decoration: none;
           transition: all .2s ease-out;
           padding: 3px;
           background: linear-gradient(to bottom,
                                           rgba(181, 225, 255, 0)0%,
                                           rgba(181, 225, 255, 0)50%,
                                           rgba(181, 225, 255, 1)50%,
                                           rgba(181, 255, 255, 1)100%);
           background-repeat: no-repeat;
       /* doubling the gradient height makes it so the top two rgba values with 0 opacity are "visible" as nothing
           when the backgroun position hover effect starts, it's like sliding a background box up behind the text that spans the width of link */
           background-size: 100% 200%;
       }
       
       #list4 a:hover {
           background-position: 0 100%;
       }
   </style>
   </head>
   
   <body>

90s Alternative Bands

Top-to-Bottom Underline Fade-In

<a href="#" target="_blank">Nirvana</a>
<a href="#" target="_blank">Smashing Pumpkins</a>
<a href="#" target="_blank">Blind Melon</a>
<a href="#" target="_blank">Stone Temple Pilots</a>
<a href="#" target="_blank">Stone Roses</a>

60s Bands

Full Underline Fade-In Using Opacity

<a href="#" target="_blank">The Doors</a>
<a href="#" target="_blank">The Beatles</a>
<a href="#" target="_blank">The Hollies</a>
<a href="#" target="_blank">The Temptations</a>
<a href="#" target="_blank">The Four Tops</a>

Disco Bands

For Showing Background Color for Links Instead of Lines

<a href="#" target="_blank">ABBA</a>
<a href="#" target="_blank">The Village People</a>
<a href="#" target="_blank">The Trammps</a>
<a href="#" target="_blank">Sister Sledge</a>
<a href="#" target="_blank">Chic</a>

70s Rock Bands

Raising the Background Color for Links

<a href="#" target="_blank">Electric Light Orchestra</a>
<a href="#" target="_blank">Led Zeppelin</a>
<a href="#" target="_blank">The Allman Brothers</a>
<a href="#" target="_blank">Blood, Sweat, and Tears</a>
<a href="#" target="_blank">Lynyrd Skynyrd</a>

</body>

Team:Lethbridge/Sandbox Links

Contents

90s Alternative Bands

Top-to-Bottom Underline Fade-In

60s Bands

Full Underline Fade-In Using Opacity

Disco Bands

For Showing Background Color for Links Instead of Lines

70s Rock Bands

Raising the Background Color for Links