How to install the Merlon Plugin

PLEASE NOTE:

To target the individual image blocks for the effect, I have used the associated “Block ID’s”. These can be found using your browser’s developer tools and inspecting each element; however, I would highly recommend installing the “Squarespace Collection/Block Identifier” plugin if you use Google Chrome, for a quicker and easier solution.

Preparing the Summary block

Before we can add the code, we need to prepare the summary block.
Summary blocks are used to display your content, be that blog posts, shop products or a galleries.

The CSS Code

Replace the “Block ID’s” with your own; remember, you don’t need to use two image blocks for this code to work.

#block-yui_3_17_2_1_1566070323991_9580{
  overflow: hidden !important;
}
#block-yui_3_17_2_1_1566070323991_9580 .summary-item:nth-child(even){
  padding-top: 50px;
  transition: 0.5s ease;
}
#block-yui_3_17_2_1_1566070323991_9580 .summary-item:nth-child(odd){
  transition: 0.5s ease;
}
#block-yui_3_17_2_1_1566070323991_9580 .summary-thumbnail-outer-container{
  border-top: 5px solid #001242 !important;
  transition: .5s ease;
}
#block-yui_3_17_2_1_1566070323991_9580 .summary-thumbnail-outer-container:hover{
  border-top: 5px solid #EDCD17 !important;
}
#block-yui_3_17_2_1_1566070323991_9580:hover .summary-item:nth-child(even){
  padding-top: 25px;
  padding-bottom: 25px;
}
#block-yui_3_17_2_1_1566070323991_9580:hover .summary-item:nth-child(odd){
  padding-top: 25px;
}