Add and remove default and hover background images on hover through ACF - php

Question

This is my very first thread, I'll try to be as precise as possible.
I'm very new to working with php, and my current project is therefor quite a challenge.
I have 2 products, I would like to be able to, through ACF, to exchange both the default BG image and the hover image.
ATM I can exchange the hover, but its visible at all time.
If I add an image through the wysiwyg editor, it wont set as bg image, but on top of the content.
Heres what I have:
These are the two products. The left one has the hover bg img, shown at all time. The right one doesnt have any for now
Here you can see the ACF on the relevant page
Here is what it looks like, if I add an image through the wysiwyg editor (the hover img shows in the background)
Here is my css, for the products
Here what the code looks like:
<?php
/**
* Variables
*/
$introductiontitle = get_sub_field('introduction_title');
$introductionsubtitle = get_sub_field('introduction_subtitle');
$introductionsubtitle2 = get_sub_field('introduction_subtitle_2');
$hover_image1 = get_sub_field('hover_element_1_background');
$hover_image2 = get_sub_field('hover_element_2_background');
<!-- Introduction
-------------------------------------------------------------->
<div class="container-fluid pt-5 pb-8">
<div class="container">
<div class="row">
<div class="col-12 text-center mb-3">
<h1 class="font-weight-bold mb-3">
<?php echo $introductiontitle; ?>
</h1>
<p>
<?php echo $introductionsubtitle; ?>
</p>
<p>
<?php echo $introductionsubtitle2; ?>
</p>
</div>
<div class="col-12 col-md-6">
<div class="col-12 product chart py-5 mb-3 bg-center bg-cover"
<?php if ($hover_image1) { ?>
style="background-image: url(<?php echo $hover_image1 ?>"
<?php } ?>
>
<?php the_sub_field('hover_element_1'); ?>
</div>
</div>
<div class="col-12 col-md-6">
<div class="col-12 product chart py-5 mb-3 bg-center bg-cover"
<?php if ($hover_image2) { ?>
style="background-image: url(<?php echo $hover_image2 ?>"
<?php } ?>
>
<?php the_sub_field('hover_element_2'); ?>
</div>
</div>
</div>
</div>
I hope this all made sense!? Otherwise just let me know, and I'll explain it better.
Thanks in advance

Answer 1

I would've posted a comment for clarification but don't have enough points for that yet so decided I'd post an answer as it might be what you're trying to achieve.
Using a combination of layered elements and opacity you should be able to achieve an effect where the background image changes.
Here's an example using solid colours, but they can easily be changed to other elements (e.g. your custom background images, and images):
https://codepen.io/epsilon42/pen/NBNVad
HTML:
<div class="product" style="background: #ccc;"><!-- change inline style to to ACF initial background-image -->
<div class="hover-background" style="background: #666;"><!-- change inline style to to ACF hover background-image --></div>
<div class="copy">
<h2>test</h2>
<p>lorem ipsum lorem ipsum</p>
<div class="icon">
<div class="initial-icon" style="background: #f00;"><!-- change this div to initial <img> --></div>
<div class="hover-icon" style="background: #b4d455;"><!-- change this div to hover <img> --></div>
</div>
</div>
</div>
CSS:
.product {
width: 300px;
height: 300px;
position: relative;
}
.product .hover-background,
.product .copy {
width: 100%;
height: 100%;
position: absolute;
}
.product .hover-background {
opacity: 0;
transition: 0.2s all ease-in;
}
.product .copy {
text-align: center;
}
.product .copy .icon {
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
}
.product .copy .icon .initial-icon,
.product .copy .icon .hover-icon {
width: 100%;
height: 100%;
position: absolute;
}
.product .copy .icon .hover-icon {
opacity: 0;
transition: 0.2s all ease-in;
}
.product:hover .hover-background {
opacity: 1;
}
.product:hover .copy .icon .hover-icon {
opacity: 1;
}
You will need to adjust the CSS a bit to suit your situation.