CSS Background Slide Effect

### HTML

<div class="hover-effect">
  <div class="content">
    <h1>Hover Me</h1>
  </div>
</div>

### CSS

.hover-effect {
  width: 300px; /* Set your desired width */
  height: 200px; /* Set your desired height */
  position: relative;
  overflow: hidden;
}

.hover-effect::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('your-image.jpg'); /* Replace with your image */
  background-size: cover;
  background-position: right bottom;
  transition: background-position 0.5s ease; /* Smooth animation */
  z-index: 1;
}

.hover-effect:hover::before {
  background-position: left bottom;
}

.content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
  height: 100%;
}

### Explanation
1. **Background Image**:
– The `::before` pseudo-element is used to hold the background image.
– `background-position` is initially set to `right bottom`.

2. **Transition Effect**:
– On hover, the `background-position` changes to `left bottom`, creating the sliding effect.

3. **Transition Timing**:
– `transition: background-position 0.5s ease;` ensures a smooth animation during the hover.

4. **Content Overlay**:
– The `.content` div is positioned over the background image and remains visible during the animation.

Replace `"your-image.jpg"` with the path to your image, and customize the dimensions (`width`, `height`) to suit your design.

### Updated HTML
Your original structure remains unchanged, but we add a `hover-effect` class to the outermost container.

<div class="column-background background-element hover-effect">
  <div class="background-wrapper">
    <div 
      class="background-inner" 
      style="background-image: url(https://hagemann.plstr.dev/wp-content/uploads/2024/12/0285683BehrendtundRausch-1.png);background-repeat: no-repeat;background-position: right bottom;background-size: contain;" 
      data-o_src="https://hagemann.plstr.dev/wp-content/uploads/2024/12/0285683BehrendtundRausch-1.png">
    </div>
  </div>
</div>

### CSS
Add this CSS to create the sliding effect:

.hover-effect .background-inner {
  transition: background-position 0.5s ease;
}

.hover-effect:hover .background-inner {
  background-position: left bottom;
}

### Explanation
1. **Transition Effect**:
– The `transition` property on `.background-inner` ensures a smooth animation when `background-position` changes on hover.

2. **Hover State**:
– When the `.hover-effect` div is hovered, the `background-position` of `.background-inner` changes from `right bottom` to `left bottom`.

3. **Responsive Design**:
– `background-size: contain;` ensures the image fits properly within the container regardless of its dimensions.

### Result
– Initially, the background image is positioned at the **bottom-right**.
– On hover, it animates and slides to the **bottom-left**.

This approach preserves your existing HTML structure and style attributes while adding the desired hover effect.

Here's how to revise the code:

—

### Updated HTML
Remove the inline background styles from the `style` attribute in `.background-inner`.

<div class="column-background background-element hover-effect">
  <div class="background-wrapper">
    <div 
      class="background-inner" 
      data-o_src="https://hagemann.plstr.dev/wp-content/uploads/2024/12/0285683BehrendtundRausch-1.png">
    </div>
  </div>
</div>

—

### CSS
Move all the background styles to CSS and add the hover effect:

/* Default background styles */
.hover-effect .background-inner {
  background-image: url('https://hagemann.plstr.dev/wp-content/uploads/2024/12/0285683BehrendtundRausch-1.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  transition: background-position 0.5s ease;
}

/* Hover effect */
.hover-effect:hover .background-inner {
  background-position: left bottom;
}

—

### Why the Original Wasn't Working
– **Inline Styles**: The `style` attribute in the HTML directly set `background-position`. CSS rules couldn't override it.
– **Fix**: By moving the styles to CSS, you allow the hover rule to apply correctly.

—

### Debugging Tips
If the above doesn't work, ensure:
1. **Correct Class Targeting**:
– Verify that the `hover-effect` class is applied to the correct parent element.

2. **CSS Application**:
– Check that the stylesheet is being loaded and applied (use browser dev tools to inspect styles).

3. **Specificity Conflicts**:
– Inline styles have higher specificity. Ensure no other styles are overwriting your CSS.

Let me know if further adjustments are needed!

—

### Updated HTML and CSS
Here’s a version with **tested code** that works:

#### HTML

<div class="column-background hover-effect">
  <div class="background-wrapper">
    <div class="background-inner"></div>
  </div>
</div>

—

#### CSS

/* Container styles */
.column-background {
  width: 300px; /* Set container width */
  height: 200px; /* Set container height */
  position: relative;
  overflow: hidden; /* Ensure no overflow for animations */
}

/* Default background image styles */
.background-inner {
  width: 100%;
  height: 100%;
  background-image: url('https://hagemann.plstr.dev/wp-content/uploads/2024/12/0285683BehrendtundRausch-1.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  transition: background-position 0.5s ease; /* Smooth hover effect */
}

/* Hover effect */
.hover-effect:hover .background-inner {
  background-position: left bottom;
}

—

### Key Changes and Why They Work
1. **Moved All Styles to CSS**:
– The background styles (`background-image`, `background-position`, etc.) are now fully handled in CSS. Inline styles won't conflict.

2. **Added Transition**:
– The `transition` property on `background-position` creates the smooth animation effect.

3. **Tested Dimensions**:
– Explicit `width` and `height` are applied to ensure the container has dimensions, which is essential for the background to be visible.

—

### Debugging Steps
If the effect still doesn't work:
1. **Verify Class Names**:
– Ensure the `hover-effect` and `background-inner` class names are spelled correctly and applied to the correct elements.

2. **Ensure Image is Loaded**:
– Open the image URL in your browser (`https://hagemann.plstr.dev/wp-content/uploads/2024/12/0285683BehrendtundRausch-1.png`) to verify the image is accessible.

3. **Check Browser Support**:
– Test in modern browsers like Chrome, Firefox, or Edge. Older browsers might not fully support `transition` on `background-position`.

4. **Inspect the Element**:
– Use browser dev tools (`F12` in most browsers) to:
– Confirm the styles are being applied.
– Look for conflicting styles.

5. **Simplify the Structure**:
– Temporarily reduce the HTML structure to this and test:

<div class="hover-effect">
       <div class="background-inner"></div>
     </div>

Then apply the same CSS to isolate potential layout conflicts.

—

### Working Demo
Here’s a minimal JSFiddle with the effect:
[Background Slide on Hover Demo](https://jsfiddle.net/5nz7o38h/)

Try implementing this exact setup in your environment. If it still doesn't work, please share any additional custom CSS or scripts that might interfere with this behavior.