Well, your problem lies in your CSS code.
.card-container .main-content:hover {
background: <?php the_field('background-farbe' ); ?>;
background-blend-mode: multiply;
}
It uses class only, so it will be applied to every element with that class. Multiplying the same code with different colors won’t change anything – only one such rule will be active.
So how to solve this?
You have to assign unique identifiers to your posts:
<div class="container">
<?php
$news = array(
'post_type' => 'post',
'category_name' => 'angebote',
'order' => 'ASC',
'posts_per_page' => -1
);
$wp_query = new WP_Query($news);
while (have_posts()) :
the_post();
?>
<div class="main-columns">
<div class="card-content" id="card-<?php echo esc_attr( get_the_ID() ); ?>">
<div class="main-content liste"
style="background-image: url(<?php the_field('background-image'); ?>
)">
<h2><?php the_title(); ?></h2>
<div class="row"><?php the_content(); ?></div>
<div class="row content-button">
<a href="https://wordpress.stackexchange.com/questions/318061/<?php the_permalink(); ?>">
<p>MEHR</p>
</a>
</div>
</div>
</div>
</div>
<style>
#card-<?php echo esc_attr( get_the_ID() ); ?> .main-content:hover {
background: <?php echo get_field('background-farbe' ); ?>;
background-blend-mode: multiply;
}
</style>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>
PS. You don’t need any if
statements in your loop, because you don’t do anything outside while loop 😉