I am creating a website for my school and I have finish most of the design, but I dont know how to create a black gloosy sidebar that has rollover images. One issue I am facing is that my website is design with a sidebar area with the width of 35% so I need to be able to create a sidebar that has rollover image links that can adjust to the page. Can any one give me some examples on how I could do this or links to show me how.

1 answer


The key here is to use the CSS property background-image to do the image swaps on hover. Nowadays, you don't even need images for the glossy effect, but I have included code if you wish to use images as you've requested.

I am using a handy website to make my glossy backgrounds: http://www.colorzilla.com/gradient-editor/

View Live Sample: http://xandor.ca/ralphstone/

        .list {
            margin: 0;
            padding: 0; 
            white-space: nowrap;    
        .list li {
            margin: 0;
            padding: 0;     
            list-style: none;
            /*text-indent: -10000px; If you use images, uncomment this for accessible html */                   
        .list li a {
            display: block;
            width: 100%;
            text-align: center;
            color: #fff;
            text-decoration: none;
            font: bold 12px/30px Arial, Helvetica, sans-serif ;
        /* If you want to use images, use this code 
        .list class1 a {
            background: url(images/image1.jpg) repeat-x;
        .list .class1 a:hover {
            background-image: url(images/image1-hover.jpg);
        .list .class2 a {
            background: url(images/image2.jpg) repeat-x;
        .list .class2 a:hover {
            background-image: url(images/image2-hover.jpg);
        .list .class3 a {
            background: url(images/image3.jpg) repeat-x;
        .list .class3 a:hover {
            background-image: url(images/image3-hover.jpg);
        /* Using CSS Gradients */
        .list li a {
            background: #b8e1fc; /* old browsers */
            background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* firefox */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* webkit */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* ie */       
        .list li a:hover {
            background: #ebf1f6; /* old browsers */
            background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* firefox */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); /* webkit */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* ie */       

I can't seem to get the Code tag to work properly, if anyone know what I am doing wrong, help would be appreciated. You can also just view the code at the sample live site.

Answered over 7 years ago by David Clarke
  • You probably shouldn't copy/paste all of the code here when you can see it on the link, especially when it's this big. But this is a good response to a kind of vague question. Ben Saufley over 7 years ago
  • +1 I agree with Ben. Abinadi Ayerdis over 7 years ago