Trouble with hover on for loop added images in masonary style grid

[gearheartstudio]

what a mouth full! First time posting! ok, working on my site for showing my photography. Most of the headaches I’ve figured out except for 2 things!

1. getting a hover function, css, jquery, w/e. on images that I added from a folder using a for loop (187 to be exact).
2. getting them to load in horizontally instead of vertically.

http://jp.gearheartstudio.com/

i’m very new to all this (used to be an actionscripter) heres all the source stuff

AND THANKS! :D
http://codepen.io/gearheartstudio/pen/xRYzNM

[gearheartstudio]

note: The gridder.js source in at the end of the body, that was an oops (doesn’t work from that location)

[Beverleyh]

Hmmmm, there’s the bigger picture here to consider (ironic really when ‘bigger picture’ is the root of concern).

http://tools.pingdom.com/fpt/cD4Gez/http://jp.gearheartstudio.com
The web page took 36.83 s to load, used 192 requests, and weighed in at 379.5 MB.

379.5MB is MASSIVELY UNSUITABLE for a web page. I’m on mobile and only get 1GB of data allowance per day. Thanks to this one page, a third of my quota is now gone.

Imposing this amount of data onto visitors is a big no-no. It can be countered somewhat with proper image compression/optimisation, but even then, I urge you to consider finding another way to present your images. You could still use this script but use less of them. Paginate them. Break them up in to categories. Only show your very best pieces to drastically cut out HTTP requests/weight. And serve smaller versions to mobile users.

[bearhead]

So you should definitely resolve the issues Beverley brought up. It would go a long way if you just loaded in optimized thumbnails instead of the full-sized images. If you’re determined to load in 168 images all at one time, they’re going to have to be no larger than like 5-10kb.

With regards to your actual questions:
The hover opacity change on #photo imgisn’t working because of the opacity animation already on that selector. You’ll need to add animation:none to #photo img:hover

If you’re using css columns for the layout, you aren’t going to be able to get the items to populate horizontally – that just isn’t how css columns work. If you want a horizontal-based layout you should use flexbox, or display:inline-block, or float:left

[Paulie_D]

Its probably worth noting that there is no horizontal layout method that will work for “masonry” style layout.

There’s a reason this is usually done by JS.

[gearheartstudio]

I knew it had to be js, I just didn’t know how to implement it because nothing was working with my code. I since tweeted the js and was able to get masonry.js to work and now it does exactly what I needed it too, except now there’s gaps at differently orientated photos, working on that now plus a lazy load of sorts that can work with my code.

Thanks for the reply 😊

[gearheartstudio]

I got masonry to finally work and it does exactly what I needed, also I was able to assign a class to all the images so now I’ll be able to implement a lazy load, plus I’m shrinking all the files down to 500px width (since right now they rang from 2000px to 4000px) yikes!

Thank you for your response and help and I’ll remember the few things you said for when I need that 😊

[Author]

Posts