How to give different hovers for images in a filter gallery?

Question

I have downloaded a filter gallery from: http://www.webdesigntunes.com/coding/jquery-filterable-portfolio/#.U1om0se_KHk and everything is great but the hover will always be the same hover what looks like this in the code:

<div class="portfolio">
    <article class="entry web trad">
        <a data-rel="prettyPhoto" href="portfolio-barn-owl.html">
            <img class="top1" src="images/knop-1.jpg" alt="">
            <span class="magnifier"></span>
        </a>
    </article>

    <article class="entry trad">
        <a data-rel="prettyPhoto" href="#">
            <img class="top1" src="images/knop-gandalf.jpg" alt="">
            <span class="magnifier2"></span>
        </a>
    </article>

.magnifier {
    background:url(images/button-hover.jpg) no-repeat center;
    width:283px;
    height:283px;
    position:absolute;
    top:10px;
    left:10px;
    bottom:10px;
    right:10px;
    opacity:0;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}
.magnifier2 {
    background:url(images/button-hover-gandalf.jpg) no-repeat center;
width:283px;
height:283px;
    position:absolute;
    top:10px;
    left:10px;
    bottom:10px;
    right:10px;
    opacity:0;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}
.entry:hover, .entry:hover .magnifier .magnifier2 { 
    opacity:1; 
} 

So, the magnifier is the hover of all the images.. I thought if I made a magnifier2 and made a css called .magnifier2 with another image I could give one of the images another hover, but it didn't work.

Has anyone else another option to solve this ?

Thanks!

Answer 1

Looking at the code in the link you provided, if you copy/changed both instances of magnifier in your post to magnifier2 and it didn't work, then it's likely you forgot to also add this css rule:

.entry:hover .magnifier2 { opacity:1; }

Since .magnifier is set to opacity:0, this rule is what causes it to appear.