How to Inverse Logo on Header Hover

How To
1

I would like to inverse the logo when I hover on the header

2

use css

#brxe-heade:hover #brxe-mylogo {  filter: invert(1) }
3

Sorry I dont mean invert as in the color, I mean invert as in use the logo inverse

4

HTML could look like this:

<div class="logo-wrapper">
        <a href="your_link_destination_for_logo1.html">
            <img src="logo1.png" alt="Logo 1" class="logo" id="logo1">
        </a>
        <a href="your_link_destination_for_logo2.html">
            <img src="logo2.png" alt="Logo 2" class="logo" id="logo2">
        </a>
   </div>

CSS:

.logo-wrapper {
    position: relative;
}

.logo {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Initially hide the second logo */
    transition: opacity 0.3s ease; /* Add a smooth transition effect */
}

.logo:hover {
    opacity: 1; /* Show the second logo on hover */
}