Bildwechsel bei Hover Effekt
apply on hover using js on fusion-column and change image src
then on mouse out replace original
<div class="fusion-column content-box-column content-box-column content-box-column-1 col-lg-6 col-md-6 col-sm-6 fusion-content-box-hover content-box-column-first-in-row">
<div class="col content-box-wrapper content-wrapper link-area-link-icon icon-hover-animation-none" style="background-color:rgba(255,255,255,0);" data-animationoffset="100%">
<div class="heading heading-with-icon icon-left">
<div class="image">
<img loading="lazy" decoding="async" src="https://autohaus.newsoftdemo.info/wp-content/uploads/2025/01/car_rental-1.svg" width="64" height="64" alt="" class="hover-image">
</div>
<h2 class="content-box-heading fusion-responsive-typography-calculated" style="font-size: 18px; line-height: 1.28; --fontSize: 18; --minFontSize: 18;" data-fontsize="18" data-lineheight="23.04px">Fahrzeugmarkt</h2>
</div>
</div>
</div>
<script>
const fusionColumn = document.querySelector('.fusion-column');
const image = fusionColumn.querySelector('.hover-image');
const originalSrc = image.src; // Store the original image source
const hoverSrc = 'https://example.com/path/to/hover-image.svg'; // Replace with the hover image source
fusionColumn.addEventListener('mouseover', () => {
image.src = hoverSrc; // Change to the hover image on mouse over
});
fusionColumn.addEventListener('mouseout', () => {
image.src = originalSrc; // Revert to the original image on mouse out
});
</script>### Explanation:
1. **HTML Structure**: The structure of your `div` remains unchanged. I've added a class `hover-image` to the “ element for easy selection in JavaScript.
2. **JavaScript**:
– We select the `fusion-column` and the image element.
– We store the original image source in the `originalSrc` variable.
– We define the new image source for hover in `hoverSrc`. You should replace `https://example.com/path/to/hover-image.svg` with the actual URL of your hover image.
– Event listeners for `mouseover` and `mouseout` change the image source accordingly.
Make sure to include this JavaScript snippet at the end of your HTML file, or wrap it in a `DOMContentLoaded` event listener to ensure it runs after the DOM is fully loaded.
### 1. **Using CSS Filter**
If the SVG is a standalone image and you want to change its color to white, you can apply a CSS filter:
<div class="fusion-column content-box-column content-box-column content-box-column-1 col-lg-6 col-md-6 col-sm-6 fusion-content-box-hover content-box-column-first-in-row">
<div class="col content-box-wrapper content-wrapper link-area-link-icon icon-hover-animation-none" style="background-color:rgba(255,255,255,0);" data-animationoffset="100%">
<div class="heading heading-with-icon icon-left">
<div class="image">
<img loading="lazy" decoding="async" src="https://autohaus.newsoftdemo.info/wp-content/uploads/2025/01/car_rental-1.svg" width="64" height="64" alt="" class="hover-image">
</div>
<h2 class="content-box-heading fusion-responsive-typography-calculated" style="font-size: 18px; line-height: 1.28; --fontSize: 18; --minFontSize: 18;" data-fontsize="18" data-lineheight="23.04px">Fahrzeugmarkt</h2>
</div>
</div>
</div>
<style>
.fusion-column:hover .hover-image {
filter: brightness(0) invert(1); /* Change the image color to white */
}
</style>### Explanation:
– The CSS filter `brightness(0) invert(1)` turns the original color to white. This method works well for simple SVG images, but it might not be perfect for all SVGs, especially those with multiple colors.
### 2. **Using Inline SVG**
If you can edit the SVG file directly or use it inline, you can change the fill color of the SVG paths. Here’s an example using inline SVG:
<div class="fusion-column content-box-column content-box-column content-box-column-1 col-lg-6 col-md-6 col-sm-6 fusion-content-box-hover content-box-column-first-in-row">
<div class="col content-box-wrapper content-wrapper link-area-link-icon icon-hover-animation-none" style="background-color:rgba(255,255,255,0);" data-animationoffset="100%">
<div class="heading heading-with-icon icon-left">
<div class="image">
<svg class="hover-image" width="64" height="64" viewBox="0 0 64 64">
<path fill="black" d="..."></path> <!-- Original SVG path here -->
</svg>
</div>
<h2 class="content-box-heading fusion-responsive-typography-calculated" style="font-size: 18px; line-height: 1.28; --fontSize: 18; --minFontSize: 18;" data-fontsize="18" data-lineheight="23.04px">Fahrzeugmarkt</h2>
</div>
</div>
</div>
<style>
.fusion-column:hover .hover-image path {
fill: white; /* Change the color to white on hover */
}
</style>### Explanation:
– Replace the SVG “ `d` attribute with the original path data.
– The CSS changes the fill color of the SVG paths to white when the parent `.fusion-column` is hovered.
### 3. **Using JavaScript to Change the Fill**
If you want to keep the SVG as an image and change the color using JavaScript, you can do the following, but you need to ensure the SVG allows for style overrides:
const fusionColumn = document.querySelector('.fusion-column');
const image = fusionColumn.querySelector('.hover-image');
fusionColumn.addEventListener('mouseover', () => {
image.style.filter = 'brightness(0) invert(1)'; // Change the image color to white
});
fusionColumn.addEventListener('mouseout', () => {
image.style.filter = ''; // Reset the filter to original
});### Summary
– **CSS filter** is the easiest way to change color if the SVG is a standalone image.
– **Inline SVG** gives you more control over styling but requires modifying the SVG.
– **JavaScript** can dynamically change styles if necessary, but it requires the SVG to allow style overrides.