Fade In CSS class

css, fadein, html, jquery

Solution

you don't need jquery for this, a pure CSS solution is much simpler (fiddle):

<div class="outer"><div class="inner"></div></div>

.outer {
    background: url(...);
}
.inner {
    background: url(...);
    opacity: 1;
    transition: opacity 0.3s;
}
.inner:hover {
    opacity: 0;
}

http://jsfiddle.net/ZAgnY/

Problem

I'm wondering how I can fade in a css class with jquery. The effect I'm looking for is sort of like what you see here: https://squareup.com/ What I've tried so far is this: ``` $(document).ready(function() { $('.mini-nav li').hover(function () { $('.hover').fadeIn(slow); }; }); ``` I thought about the .addClass() method, but I'm not sure where to add it (or if that is the best thing to do). EDIT: Here is a fiddle of something I've tried: http://jsfiddle.net/J93NR/1/

Original source

Related problems