CSS3: Only the last class of my navigation is working

Question

So I am trying to make a menu with divs so I can use the :hover and have an image showing when you hover over each button, and my html for each of the links are:

<div class="home homeTwo">
        <img src="images/homebanner.jpg" width="120"  alt="homebanner">
    <div class="homeMask"><a href="home.html" class="to2Page">Home</a>
    </div>
</div>

Then my Css does the rest of the work, so :

 .home{
    width: 120px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

.home .homeMask{
    width: 120px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.home img{
    display: block;
    position: relative;
}


.home a.to2Page{
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    font-family:Verdana, Geneva, sans-serif;
}

.homeTwo img{
    transform: scaleY(1);
    transition: all 0.7s ease-in-out;
}

.homeTwo .homeMask{
    transition: all 0.5s linear;
    opacity: 0;
    filter:alpha(opacity=0);
}  


.homeTwo a.to2Page{
    opacity:0;
    filter:alpha(opacity=0);
    transform: scale(0);
    transition: all 0.5s linear;
}

.homeTwo:hover img{
    transform: scale(10);
    opacity: 0; 
    filter:alpha(opacity=0);
}
.home:hover .homeTwo:hover{
    opacity: 1;
    filter:alpha(opacity=100);
}                                                                           

.homeTwo:hover a.to2Page{
    transform: scale(1);
    opacity: 1;
    filter:alpha(opacity=100);
}

I have 7 extra classes that do the same thing, however only the last one works. Am I doing something wrong?

@SuperHornet You can just move the code from here to jsfiddle.. Users are supposed to share the code, fiddles are extra comforts :) — Mr. Alien, Mar 17 '14 at 12:53
regarding this:`http://jsfiddle.net/QpK9g/`, that is working — Super Hornet, Mar 17 '14 at 13:02

score 0 · Answer 1 · answered Mar 17 '14 at 13:05

You haven't defined the class "home homeTwo" in your CSS file.. If you delete the first home in your it will be fine. You have this.

<div class="home homeTwo">
        <img src="images/homebanner.jpg" width="120"  alt="homebanner">
    <div class="homeMask"><a href="home.html" class="to2Page">Home</a>
    </div>
</div>

Should be this :

<div class="homeTwo">
    <img src="images/homebanner.jpg" width="120"  alt="homebanner">
<div class="homeMask"><a href="home.html" class="to2Page">Home</a>
</div>

Sorry, but both home and homeTwo are required for this effect to work, I tried without homeTwo and it doesn't work. — kanjas, Mar 17 '14 at 19:48

CSS3: Only the last class of my navigation is working

1 Answers1