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

[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