Hello kymthedesigner,

For isotope to work properly the items needs to be direct children of the container. So first change the div element to anchor element: => . Give the new element the class fade-out.

Then if you have any questions about styling/functionality (not isotope only), you can ask here. (I can help you with the hover fade effect)

Regards,

Nikola Boychev

H Nikola,

Thanks for your reply.

At current I have the "fade-out" class on the tag, the fade out effect works fine.

However, on page reload all the items stack up, causing my issue.

http://www.madewithpassion.co/work/#

Hi kymthedesigner,

Change from this (example):

<a class="fade-out" href="http://www.madewithpassion.co/portfolio/angus-purden-web-design/">
    <div class="col span_4 element web-design " data-project-cat="web-design ">
        <div class="work-item">
            <img class="custom-thumbnail" src="http://www.madewithpassion.co/wp-content/uploads/2013/03/anguspurden.png" alt="Angus Purden &#8211; Web Design" />
            <div class="work-info">
                <div class="vert-center">

                        </div><!--/vert-center-->
                    </div>
                </div><!--work-item-->


                <div class="work-meta">
                    <h4 class="title">Angus Purden &#8211; Web Design</h4>
            </div>

            </div><!--/col-->

        </a>

to this (basically, make the div.col.span_4.element be before the a.fade-out on each element):

    <div class="col span_4 element web-design " data-project-cat="web-design "> 
<a class="fade-out" href="http://www.madewithpassion.co/portfolio/chateaul-lavocat-web-design/">
                                    <div class="work-item">
                                                    <img class="custom-thumbnail" src="http://www.madewithpassion.co/wp-content/uploads/2013/03/chateaulavocat.png" alt="Bordeaux Wine &#8211; Web Design" />
                            <div class="work-info">
                                <div class="vert-center">
                                </div><!--/vert-center-->
                            </div>
                        </div><!--work-item-->


                        <div class="work-meta">
                            <h4 class="title">Bordeaux Wine &#8211; Web Design</h4>
                    </div>
                    </a>

    </div>
    <!--/col-->

Do that on all of them, and it will work isotopely

let me know if it works for you

Hi Guyisra,

Thanks for that.

However, it kills the fade-in effect.

where is the code that is relevant for that effect?

updated URL: http://www.madewithpassion.co/portfolio/

I have the code implemented in the header and jFade.js attached.

Thanks

Ok,

So I think I got it to how you want it to be

first, switch the and the as I said before. This will fix the isotope issue The problem with the fade lies in the initializer in the header

jQuery().ready(function() {
    jQuery('.element').jfade({ 
        start_opacity: "1",  
        high_opacity: "1",
        low_opacity: ".4",
        timing: "500",

    }); });

as to not mess with your code too much, the fade element should be the most upper. A quick fix would be to initialize jfade on .element since after we switched the <a> and the <div> - .element would be the most upper node. You could, alternativly, change the place of the classes, but I don't know how it affects the rest of your code.

Let me know if its ok

Hi,

Thanks again for your help.

Again It's not working. I need the 'a' tag as that links to the portfolio page.

It works at best as it is. Just sometimes on refresh it messes things up.

Hi

Are you sure the anchor doesn't work? I did it and it works (or at least I don't understand what doesn't work)

see here http://jsfiddle.net/cFEQv/embedded/result/

I copied your site's html and changed it the way I suggested and placed it all. Isotope works properly and fade works properly and links work properly. Am I missing something?