Basic css problem (I suppose) – remove image hover background

[ad]

Sorry if I steal your time, but I’ve been searching for some hours now – without result.
I’m looking for the css-code to prevent background color appearing on two image links on a specific page (see url beneath). The paragraph code containing the two images:

<p><a href="https://twitter.com/dharmoebe/" target="_blank" rel="noopener noreferrer"><img src="http://www.gedel.nl/wp-content/uploads/2020/05/twitter-vogel.png" alt="" width="34" /></a>&nbsp;&nbsp;&nbsp; <a href="https://instagram.com/dharmoebe/" target="_blank" rel="noopener noreferrer"><img src="http://www.gedel.nl/wp-content/uploads/2020/05/Instagram-icoon.png" alt="" width="33" height="33" /></a></p>

In extra css I put:
.page-id-4527 a:hover img {background-color: transparent}

This noob can’t get it to work, unfortunately.
Thanks for any help!

[Leo]

Hi there,

You will need add a custom class like no-background-color to the social icons links first.

Then I can provide the CSS 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ad]

Thanks, Leo, for the fast reply!
Here’s the code with class added:

<p><a href="https://twitter.com/dharmoebe/" target="_blank" rel="noopener noreferrer" class="no-background-color"><img src="http://www.gedel.nl/wp-content/uploads/2020/05/twitter-vogel.png" alt="" class="wp-image-7083" width="34"></a>&nbsp;&nbsp;&nbsp; <a href="https://instagram.com/dharmoebe/" target="_blank" rel="noopener noreferrer" class="no-background-color"><img src="http://www.gedel.nl/wp-content/uploads/2020/05/Instagram-icoon.png" alt="" class="wp-image-7082" width="33" height="33"></a></p>

Greetings,
ad

[Leo]

The wrong quotation mark is being used here.

Make sure it’s class="no-background-color".

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ad]

Mm, I opened source view in Chrome to check.
Both instances – my quote and yours – appear to have the same contents:
"no-background-color"

Also, I convert all copied text standard to plain text via PureText application (shortcut).
Very curious to hear more details on this 😉

[David]

Hi there,

this is how your HTML should look:

<p>
    <a href="https://twitter.com/dharmoebe/" target="_blank" rel="noopener noreferrer" class="no-background-color">
        <img src="https://www.gedel.nl/wp-content/uploads/2020/05/twitter-vogel.png" alt="" class="wp-image-7083" width="34">
    </a>
    <a href="https://instagram.com/dharmoebe/" target="_blank" rel="noopener noreferrer" class="no-background-color">
        <img src="https://www.gedel.nl/wp-content/uploads/2020/05/Instagram-icoon.png" alt="" class="wp-image-7082" width="33" height="33">
    </a>
</p>

Then use his CSS to remove the color:

.inside-article a.no-background-color:hover {
    background-color: transparent;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[ad]

Perfect – thanks for your help!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts