css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Nice responsive gallery with:

ā–Ŗ CSS columns ā–Ŗ roll over, hover caption

ā–Ŗ Magnific Popup script ā–Ŗ Zoom in effect

ā–Ŗ Haml & Sass & CoffeeScript



  1. Hi. love your gallery! i would like to use it on my web (i'm not a developer) how do i change the course for pictures as it is set for online not local folder? many thanks Radek

  2. @Radek_K Hi. You need to change src and href attributes into something like "/images/image-1.jpg" if your images are in a local "images" folder. Src attribute is a miniature image source and href is a big image link.

  3. Thank you very much! I was trying to change it but neve get the slider. Iā€™m only changing html code right? Sorry to bother you with such basic stuff šŸ˜¬

  4. @Radek_K Yes, you don't have to change anything in CSS or JS. Just HTML. To make slider work, you will have to change href attributes for all images (A, anhor elements), because slider depends on those values.

  5. Brilliant! Will have a go again šŸ˜‰

  6. Forgot to ask you! Is it possible that every picture has its own gallery? So the picture in the layout is essentially thumbnail?

  7. @Radek_K https://codepen.io/harconst/pen/wBNbNx ā€“ this is not the best solution, better to use some javascript object with urls and titles for images, but it works

  8. Oh ok. Thank you for that. Will try . Nevertheless your gallery is really cool šŸ˜Ž Thank you again for getting back to me.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.