style.css

/*!
 * Theme Name:        Dev Hours Web Layouts
 * Description:       A TT4 child theme that showcases layout examples from the Developer Hours session on Web Layouts.
 * Version:           1.0.0
 * Template:          twentytwentyfour
 * Tags:              full-site-editing
 * Tested up to:      6.5
 * Requires at least: 6.4
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

/**
 * Reveal styles reveal one part of the Cover block and/or hide another. There
 * are multiple styles that build off the same `.is-style-reveal` base class.
 */
 .wp-block-cover[class*=is-style-reveal] {
	/* Position must be relative for the link to cover the entire block. */
	position: relative;
 }
 
/* Set the transition for the background (overlay). */
.wp-block-cover[class*=is-style-reveal] .wp-block-cover__background {
	transition: opacity 0.5s ease-in-out;
}
 
/* Remove text decoration for links. */
.wp-block-cover[class*=is-style-reveal] a {
	text-decoration: none;
	outline: none;
}
 
/**
 * This will technically take all links and position them over the
 * entire Cover block container. However, the last link will win out.
 * We're also making sure that we don't target this when in the editor.
 */
.wp-block-cover[class*=is-style-reveal]:where(:not([class*=block-editor])) a:after {
	content: "";
	z-index: 1;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
 }
 
/* Style for revealing the Cover background image on hover/focus. */
.wp-block-cover.is-style-reveal-image {
	overflow: hidden;
}

/* When not selected, make the background (overlay) fully opaque. */
.wp-block-cover.is-style-reveal-image:is(:not(
	:hover,
	:focus-within,
	.is-selected
)) .wp-block-cover__background {
	opacity: 1;
}

/**
 * When not selected, hide the background image.
 * Set the transition for the inner container.
 */
.wp-block-cover.is-style-reveal-image .wp-block-cover__image-background {
	opacity: 0;
	transition: all 0.5s ease-in-out;
}

/* Show and scale the background image when selected. */
.wp-block-cover.is-style-reveal-image:hover .wp-block-cover__image-background,
.wp-block-cover.is-style-reveal-image:focus-within .wp-block-cover__image-background,
.wp-block-cover.is-style-reveal-image.is-selected .wp-block-cover__image-background {
	opacity: 1;
	transform: scale(1.3);
}
 
/* Style for revealing the Cover text/content on hover/focus. */
.wp-block-cover.is-style-reveal-text {
	overflow: hidden;
}

/* When not selected, hide the background (overlay). */
.wp-block-cover.is-style-reveal-text:where(:not(
	:hover,
	:focus-within,
	.is-selected
)) .wp-block-cover__background {
	opacity: 0;
}

/**
 * When not selected, there is no background image, but there is a
 * background gradient, make the background fully opaque.
 */
.wp-block-cover.is-style-reveal-text:where(:not(
	:hover,
	:focus-within,
	.is-selected,
	:has(.wp-block-cover__image-background)
)) .wp-block-cover__background.has-background-gradient {
	opacity: 1;
}

/**
 * Hide the inner container when not selected.
 * Set the transition for the inner container.
 */
.wp-block-cover.is-style-reveal-text .wp-block-cover__inner-container {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

/* Show the inner container when selected. */
.wp-block-cover.is-style-reveal-text:hover .wp-block-cover__inner-container,
.wp-block-cover.is-style-reveal-text:focus-within .wp-block-cover__inner-container,
.wp-block-cover.is-style-reveal-text.is-selected .wp-block-cover__inner-container {
	opacity: 1;
}