How to install the Jaws 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 Image Blocks

Before we can add our code, we need to configure our image blocks so that they display both the image title and image description.

This is important as our code will modify these two elements almost exclusively.

Simply add an image block into your webpage > on the “IMAGE” dialogue box that opens up, click on the “Design” tab > select “Poster” > click on “APPLY”.

You can do this as many times as you need to, but this article covers four image blocks displayed in a grid-format.

image+block+setup.gif

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_1565787783300_6221 img{
    filter:brightness(50%);
}
/*pre-rollover styles*/
#block-yui_3_17_2_1_1565787783300_6221 .image-title-wrapper p,
#block-yui_3_17_2_1_1565787783300_6221 .image-subtitle-wrapper p{
    display: inline-block;
    position: absolute;
    transition: .5s ease;
}
#block-yui_3_17_2_1_1565787783300_6221 .image-title-wrapper p{
    width: 80%;
    left: 10%;
    top: 10%;
    font-size: 1em; /*change title size*/
}
#block-yui_3_17_2_1_1565787783300_6221 .image-subtitle-wrapper p{
    width: 80%;
    left: 10%;
    top: 60%;
    opacity: 0;
  
    font-size: 1.5em !important; /*change title size*/
}
/*post-rollover styles*/
#block-yui_3_17_2_1_1565787783300_6221:hover .image-title-wrapper p,
#block-yui_3_17_2_1_1565787783300_6221:hover .image-subtitle-wrapper p{
    transition: .5s ease;
}
#block-yui_3_17_2_1_1565787783300_6221:hover .image-title-wrapper p{
    top: 25%;
}
#block-yui_3_17_2_1_1565787783300_6221:hover .image-subtitle-wrapper p{
    top: 40%;
    opacity: 1;
}