I recently downloaded a filter gallery from this link and while everything is working fine, I noticed that the hover effect remains the same for all images. The code snippet responsible for this hover effect looks like this:
<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;
}
The issue arises as the magnifier hover effect is applied to all images uniformly. I attempted to create a new magnifier called magnifier2 with a different image and associated CSS rules using .magnifier2, but unfortunately, it did not work as expected.
If anyone has an alternative solution to address this problem, I would greatly appreciate your input!
Thank you!