CODEWITHSUNDEEP
jqueryhoverquicksand
okiedokey
okiedokey

Reputation: 143

quicksand portfolio hover effect stays visible after using filter

I read a lot about people having trouble with quicksand and hover effects because they wouldn't be visible after filtering.

In my case it's the exact opposite. I applied a hover effect via jQuery and it just works fine on page load, but after using filters the hover effect simply stays visible on some images (not even every image is affected) and when I hover the hover-effect disappears. It's the exact opposite behaviour of what it's supposed to be.

Can someone help me here?

For explanation:

HTML

 <ul class="filterable-grid">
        <li>
            <span class="portfolio-thumbnail">  
                <img src="#">
            </span>                             


            <span class="thumbnail-overlay">
                <div class="infotext">
                    <h4><a href="#">Title</a></h4>
                    <p>lorem ipsum</p>
                </div>
           </span>
        </li>
</ul>

jQuery

$(document).ready(function() {
    $('.thumbnail-overlay').hide();
     $('.filterable-grid li').live('hover', function(){
          $(this).css('box-shadow', 'inset 0px 0px 55px -2px rgba(0,0,0,1)')
          $(this).find('.thumbnail-overlay').toggle('slow');
          return false;
     });
});

Upvotes: 0

Views: 256

Answers (1)

okiedokey
okiedokey

Reputation: 143

Alright, I found the problem.

Explanation:

The hover-effect would be visible on some items after using a filter, because I did not hide the .thumbnail-overlay <div> via CSS but jQuery. So if I would use one of the filters, the code would already have been executed which means that my .hide() function does not affect portfolio items that are added dynamically.

Solution:

I added display: noneto .thumbnail-overlayin my CSS file. Then I changed my jQuery function to this:

// Show Overlay on mouseover
    $('#main-content').on('mouseover', '#quicksand-portfolio li', function(){
        $(this).find('.thumbnail-overlay').stop().toggle('slow');    
    })

    $('#main-content').on('mouseout', '#quicksand-portfolio li', function(){
        $(this).find('.thumbnail-overlay').stop().toggle('slow');    
    })

The selector #main-contentis the containig div, so it's an element that's not being dynamically changed when using a filter.

Upvotes: 0

Related Questions