Genesis Masonry With Zoom In Images

This code adds the masonry effect to any Genesis archive page with a zoom in affect on the featured images. The code includes :

• Masonry jQuery
• Zoom in CSS so the image stays within the original div container
• PHP code to wrap the genesis featured image in a custom div

Tested using the Genesis Sample child theme by StudioPress. May require CSS modifications for use in other Genesis child themes.

[fb_plugin video href=”https://www.facebook.com/wpsites.net/videos/308849871836007/”]

Code Installation

There’s 2 simple steps :

Step 1 : From the download folder, upload the folder named masonry to your child theme folder.

Step 2 : From the download folder, upload the file named front-page.php to your child theme folder.

Remember to clear caching!

Download Folder

Related Tuts

• Genesis Masonry Archive Template With Image Hover Overlay
• Using Masonry in Genesis With Different Sized Featured Images
• Genesis Masonry Template