Swap Image on Hover

Hi there,

ok, you could add the image as a background to a container and then place an image block inside that container.

For example, create a new draft page and switch the Editor to Code View ( from the editor top bar 3 dot menu ).
Then copy and paste the following code:

<!-- wp:generateblocks/container {"uniqueId":"bd515ae1","isDynamic":true,"blockVersion":4,"display":"flex","metadata":{"name":"Flex Row"}} -->
<!-- wp:generateblocks/container {"uniqueId":"600560b3","isDynamic":true,"blockVersion":4,"spacing":{"paddingLeft":"20px","paddingRight":"20px"},"borders":{"borderRightWidth":"2px","borderRightStyle":"solid"},"metadata":{"name":"column with padding + border"}} -->
<!-- wp:generateblocks/container {"uniqueId":"802beb57","bgImage":{"id":"","image":{"url":"https://dev.carlcox.com/wp-content/uploads/2024/04/Red-808.png","height":58,"width":58,"orientation":"landscape"}},"bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"contain","repeat":"no-repeat","attachment":""},"isDynamic":true,"blockVersion":4,"sizing":{"width":""},"metadata":{"name":"container has bg"}} -->
<!-- wp:generateblocks/image {"uniqueId":"5324b2c2","sizeSlug":"full","blockVersion":2} -->
<figure class="gb-block-image gb-block-image-5324b2c2"><img class="gb-image gb-image-5324b2c2" src="https://dev.carlcox.com/wp-content/uploads/2024/04/Red-808.png" alt=""/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"1101d680","isDynamic":true,"blockVersion":4,"spacing":{"paddingLeft":"20px","paddingRight":"20px"},"borders":{"borderRightWidth":"2px","borderRightStyle":"solid"},"metadata":{"name":"column with padding + border"}} -->
<!-- wp:generateblocks/container {"uniqueId":"3745b20c","bgImage":{"id":"","image":{"url":"https://dev.carlcox.com/wp-content/uploads/2024/04/Red-808.png","height":58,"width":58,"orientation":"landscape"}},"bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"contain","repeat":"no-repeat","attachment":""},"isDynamic":true,"blockVersion":4,"sizing":{"width":""},"metadata":{"name":"container has bg"}} -->
<!-- wp:generateblocks/image {"uniqueId":"0cc5b6af","sizeSlug":"full","blockVersion":2} -->
<figure class="gb-block-image gb-block-image-0cc5b6af"><img class="gb-image gb-image-0cc5b6af" src="https://dev.carlcox.com/wp-content/uploads/2024/04/Red-808.png" alt=""/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"ac403cc8","isDynamic":true,"blockVersion":4,"spacing":{"paddingLeft":"20px","paddingRight":"20px"},"borders":{"borderRightWidth":"2px","borderRightStyle":"solid"},"metadata":{"name":"column with padding + border"}} -->
<!-- wp:generateblocks/container {"uniqueId":"bc63e243","bgImage":{"id":"","image":{"url":"https://dev.carlcox.com/wp-content/uploads/2024/04/Red-808.png","height":58,"width":58,"orientation":"landscape"}},"bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"contain","repeat":"no-repeat","attachment":""},"isDynamic":true,"blockVersion":4,"sizing":{"width":""},"metadata":{"name":"container has bg"}} -->
<!-- wp:generateblocks/image {"uniqueId":"877df373","sizeSlug":"full","blockVersion":2} -->
<figure class="gb-block-image gb-block-image-877df373"><img class="gb-image gb-image-877df373" src="https://dev.carlcox.com/wp-content/uploads/2024/04/Red-808.png" alt=""/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"c4ffcd27","isDynamic":true,"blockVersion":4,"spacing":{"paddingLeft":"20px","paddingRight":"20px"},"borders":{"borderRightWidth":"","borderRightStyle":""},"metadata":{"name":"column with padding + border"}} -->
<!-- wp:generateblocks/container {"uniqueId":"f49af4e4","bgImage":{"id":"","image":{"url":"https://dev.carlcox.com/wp-content/uploads/2024/04/Red-808.png","height":58,"width":58,"orientation":"landscape"}},"bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center center","size":"contain","repeat":"no-repeat","attachment":""},"isDynamic":true,"blockVersion":4,"sizing":{"width":""},"metadata":{"name":"container has bg"}} -->
<!-- wp:generateblocks/image {"uniqueId":"014ec18a","sizeSlug":"full","blockVersion":2} -->
<figure class="gb-block-image gb-block-image-014ec18a"><img class="gb-image gb-image-014ec18a" src="https://dev.carlcox.com/wp-content/uploads/2024/04/Red-808.png" alt=""/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

This will provide this layout:

https://app.screencast.com/96f6n6q2lC1Oa

In the Flex Row, there are column containers which has the Padding and the Borders
Inside each of those is another Container that has a background image and contains an image block.

The background image and image block in my example are the same image ( off your site ).
Swap the image block image for one with the Bright LED. Making sure its the exact same size as the background image.

then it would quite simple to apply an effect to the container with background to hide the Image Block, and then show it on hover. Which we can help with if you want to set it up.
NOTE: You’re current hover effect needs to apply to the container with the background in this setup

Looking at test-lights.

in your child theme you have this CSS:

figure {
    margin: 1em 40px;
}

Which is adding space around the figure which inturn gets added to the size of the parent container hence the larger background image.

1. select the container with the background image:
2. give it a CSS class eg. remove-figure-margins
2.1 add this CSS to remove that margin:

.remove-figure-margins figure {
    margin: 0;
}

3. set the Background Images > Position to CENTER TOP

Select each of the column Container Blocks and in Layout set their Z-Index to 1

If you select each of the column container blocks.
For reference:
https://app.screencast.com/96f6n6q2lC1Oa?conversation=WIl34vwuFu5zxDiGggCngz

those being the “columns with padding + border”

And increase their left and right padding.

Try this method on your home page, but you may need to modify your hover effects to suit.

1. Duplicate the Image block you have in the first column, and change the second image to the reburied hover image.
2. select the column Container Block the image is inside and in Advanced > Additional CSS Class(es) add: has-image-hover

3. Add this CSS

.has-image-hover:not(:hover) figure:nth-child(2),
.has-image-hover:hover figure:nth-child(1) {
    display: none;
}

nth-child allows you to select a child element based on its logical order.
For example the HTML looks like this:

<div class="has-image-hover">
    <figure><img></figure>
    <figure><img></figure>
</div>

The parent selector is has-image-hover and it has two figure child elements.
So this:

.has-image-hover figure:nth-child(2)

Targets the 2nd figure child element inside the has-image-hover container.

More info here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

You’re welcome and you too