Updated on 9 Sep 2024
This Pro tutorial provides the steps to set up a horizontal accordion of featured images of posts output by a Bricks query loop so that each image expands smoothly, making the others shrink as they are hovered.
We shall also have the post titles appear as caption and slide in up from the bottom when hovered with the entire accordion item linking to the corresponding single post's permalink.
Coming to responsiveness, at 992px and below breakpoint we shall reduce the height of the images so they don't appear too vertically stretched. At this breakpoint, the device is likely a tablet and there won't be any hover action, so tapping the images would briefly show the caption (post title) and take the user to the corresponding single post.
At 768px and below, we shall make the accordion items (images) appear one below the other with the post title captions showing up.
Step 1
Register a custom image size for the vertical images in our accordion.
Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin:
<?php
add_image_size( 'horizontal-accordion-item', 1000, 1563, true );
add_filter( 'image_size_names_choose', function ( $sizes ) {
return array_merge( $sizes, [
'horizontal-accordion-item' => 'Horizontal Accordion Item',
] );
} );
If your posts already have featured images before adding this code, regenerate thumbnails.
Step 2
Edit your Post/Template with Bricks.
