CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2588644
user2588644

Reputation: 37

Responsive filterable portfolio

I am attempting to program a portfolio section very similar to: http://www.nouvehmedia.com/#3_columns_projects.html

However, it seems that with my zero knowledge of jquery/javascript, I am not able to recreate the results.

Ideally I was attempting to put my own 'touch' on it. It would function in its entirety like portrayed on the website above, but clicking on them would actually open a modal instead.

My trouble areas are:
* filtering the results
* applying the mouse overlay effect (I can only seem to effect the bottom text when my mouse is over that, but it does not transition if it is over the image)

Here is my code, I am using foundation framework and so it looks quite off when I import the code into jsfiddle to show my work: jsfiddle.net/feF43/1/
Here is what it looks like on my end:

Is what I'm trying to do possible in CSS, or should I be looking into finding a similar effect on github or such to implement with my code?

Upvotes: 0

Views: 1835

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

Oh that's a shame, I actually looked at this yesterday as I'm looking to use it in my next site. I'm more of a Bootstrap framework fan than Foundation though.

There is a plugin called quicksand.js which does what I think you're trying to do above. And I stumbled across a tutorial for using that with Bootstrap just last night:

Unfortunately I had a look into this for you and it seems the way that Foundation applies its grids means that quicksand doesn't work very well with it:

So, perhaps suggesting you change frameworks is a little bit of a drastic solution :) but looking at your fiddle it seems the markup is very similar between the two frameworks.

I just had a look at the quicksand source code as well and its really not that long. So even if you stick with zurb you can see the inner logic of quicksand here:

Hope this helps.

Upvotes: 1

Related Questions