Add Feature image on static pages with mouseover

I’m ALMOST THERE!

I’ve got the code to put the featured image in as a background image (from this post) with the idea that I could create the HOVER state in the style.css to load a new background image.

BUT this puts the background image into the resulting page with a STYLE TAG, which I can’t change in the CSS because the style tag trumps the style.css doc.

Is there anyway to change that?

Here’s the code

<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<div id="custom-bg" style="background-image: url('<?php echo $image[0]; ?>')">

</div>
<?php endif; ?>

You can write a rule that overrides inline style by using the !important clause at the end of the property value. In fact, using the !important clause is the only way to override an inline style (unfortunately, many beginning web developers tend to overuse it when it’s not necessary).

For example, if you want to change the background-image property on hover, you could do something like this:

.page-id-123 #custom-bg:hover {
   background-image: url('https://example.com/images/new_image.jpg') !important;
}

That worked!!

Thanks so much, Crouching Bruin, for teaching me that!

Hi @crouchingbruin,

I hope you are well today and thank you for helping here.

Your help here is really appreciated.

Thanks,
Movin