FANDOM


This CSS code will add a new class named "hoverimage":
<span class="hoverimage"></span>

The hover image class will make images inside it lighter and will return to its original color when you move your cursor over it.

Secondly it will do this automatically with your logo (only when your logo is an image).

Implementation

Configuration

Hover Class

For the class only:

/* Class */
.hoverimage img {
    opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
}
    .hoverimage img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }

For the hoverlogo only:

/* Installing Hover Logo */
#WikiHeader h1.wordmark img {
    opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
}
    #WikiHeader h1.wordmark img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }
/* Installing Hover Logo (editor) */
span.wordmark.small.graphic.font-cpmono {
    opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
}
    span.wordmark.small.graphic.font-cpmono:hover {
        opacity: 1.00;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }

Modification

Here are some tips for modifying the CSS for your personal use:

How to rename class

You can rename the class by renaming "hoverimage". However, don't forget to keep "img" after it. Here's an example for renaming the class "hoverimage" to "hover":

/* Class */
.hover img {
    opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
}
    .hover img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }

How to start lighter

To let the logo or hoverimage start lighter or darker simply edit the opacity. Just don't forget to give the same value to the IE support:

    opacity:0.85;
    filter:alpha(opacity=85); /* For IE8 and earlier */

Here are some examples to start with a lighter logo with a hover that returns it to its original color. In this case I set the opacity to 0.7:

/* Installing Hover Logo */
#WikiHeader h1.wordmark img {
    opacity: 0.70;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
    #WikiHeader h1.wordmark img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }
span.wordmark.small.graphic.font-cpmono {
    opacity: 0.70;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
    span.wordmark.small.graphic.font-cpmono:hover {
        opacity: 1.00;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }

How to end with darker

Just like making it lighter, you simply need an opacity modification. Here's an example to make the hover darker:

/* Installing Hover Logo */
#WikiHeader h1.wordmark img {
    opacity: 1.00;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
    #WikiHeader h1.wordmark img:hover {
        opacity: 1.2;
        filter: alpha(opacity=120); /* For IE8 and earlier */
    }
span .wordmark.small.graphic.font-cpmono {
    opacity: 1.00;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
    span.wordmark.small.graphic.font-cpmono:hover {
        opacity: 1.20;
        filter: alpha(opacity=120); /* For IE8 and earlier */
    }

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.