Galería con efecto acordeón al hacer hover

Este es uno de los ejemplos que mostré durante la presentación que hice en la WordCamp Logroño 2025.

El resultado final

El código

add_action( 'init', 'cg_horizontal_accordion_style' );
function cg_horizontal_accordion_style() {
	register_block_style( 'core/gallery', array(
		'name'         => 'osom-horizontal-accordion',
		'label'        => __( 'Horizontal Accordion', 'osom-block-styles' ),
		'inline_style' => '@media (prefers-reduced-motion: no-preference) {
		 .wp-block-gallery.is-style-osom-horizontal-accordion {
			 height: 400px;
		 }
		 .wp-block-gallery.is-style-osom-horizontal-accordion figure.wp-block-image {
			 flex: 1 1 0%;
			 transition: flex-basis 0.5s cubic-bezier(0.4,0,0.2,1), filter 0.3s;
			 min-width: 0;
			 max-width: 100%;
			 margin: 0;
			 position: relative;
			 cursor: pointer;
			 z-index: 1;
			 height: 100%;
			 display: flex;
			 align-items: stretch;
		 }
		 .wp-block-gallery.is-style-osom-horizontal-accordion figure.wp-block-image img {
			 aspect-ratio: 2/3;
			 width: 100%;
			 height: 100%;
			 object-fit: cover;
			 transition: box-shadow 0.3s, filter 0.3s;
			 display: block;
		 }
		 @media (hover: hover) and (pointer: fine) {
			 .wp-block-gallery.is-style-osom-horizontal-accordion:has(figure.wp-block-image:is(:hover, :focus)) figure.wp-block-image:not(:is(:hover, :focus)) {
				 flex-basis: 120px;
				 filter: grayscale(0.5) brightness(0.8);
				 z-index: 0;
			 }
			 .wp-block-gallery.is-style-osom-horizontal-accordion figure.wp-block-image:is(:hover, :focus) {
				 flex-basis: 480px;
				 z-index: 2;
				 filter: none;
			 }
		 }
		 @media (max-width: 800px) {
			 .wp-block-gallery.is-style-osom-horizontal-accordion {
				 height: 220px;
				 flex-direction: column;
			 }
			 .wp-block-gallery.is-style-osom-horizontal-accordion figure.wp-block-image {
				 flex-basis: auto;
				 min-height: 80px;
				 height: 100%;
			 }
		 }
	 }',
	) );
}