WordPress post image change on hover (ACF?)

On a WordPress page, I’m having the post image as a background-image in the header. Here’s how it is solved:

<?php if (has_post_thumbnail( $post->ID ) ): ?>
        <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
        <?php else : ?>
        <?php endif; ?>         

        <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader" style="background-image: url('<?php echo $image[0]; ?>')">...</div>

What I want now is add a second image to the post (Advanced Custom Fields??) which should be displayed on hover. How can I achieve this?

EDIT

Since not every header image has a second image for hover, I have created 2 custom fields called “normal” and “hover”. If the post has a post image, it’s a “static” header, if there is no post image, I’m getting “normal” and “hover”. I creted a condition to distinguish those 2 types:

<?php if (has_post_thumbnail( $post->ID ) ): ?>
    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
    <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader" style="background-image: url('<?php echo $image[0]; ?>')"> 
<?php else : ?>
    <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader" style="background-image: url('<?php the_field('normal'); ?>');">   
<?php endif; ?> 

What I need now is to get my second image, “hover” as a hover…

Leave a Comment