<?php
/**
 * Title: Image with Full Height Scroll on Hover
 * Slug: acai/a-image-hover-scroll
 * Categories: acai_images, featured
 */
?>

<!-- wp:paragraph -->
<p><?php esc_html_e( 'This image is set to display in 16:9 aspect ratio.', 'acai' ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><?php esc_html_e( 'Hovering over the image will make it scroll top to bottom through its full height, within its 16:9 container.', 'acai' ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:image {"width":"760px","aspectRatio":"16/9","scale":"cover","linkDestination":"none","className":"acai-hover-scroll","acaiImgScroll":true} -->
<figure class="wp-block-image is-resized acai-hover-scroll"><img src="<?php echo esc_url( get_theme_file_uri('assets/images/waterfall.jpg') ); ?>" alt="" style="aspect-ratio:16/9;object-fit:cover;width:760px"/></figure>
<!-- /wp:image -->
