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

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 :)

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

The wrong quotation mark is being used here.

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

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 ;-)

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;
}

Perfect - thanks for your help!

You're welcome

Hi David,

on the page
https://www.gedel.nl/blog/zeg-een-gedicht-van-rumi/
appears the same issue as solved (years ago) in this topic:
hovering over the image gives a brown background beneath.

The standard css is:

.inside-article a:hover {
text-decoration-line: none;
background-color: #9d835e;
color: white;}

There no effect when I add:

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

Maybe it's conclicting with the standard rule?
I tried to use !important...

Would you know how to solve this?
Btw, is there a general way to prevent hover-effects on images?

Thanks for any help.

Hi there,

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

When using the above CSS, you need to make sure the <a> element has the no-background-color class.

I just inspected your page and I don't see this class being applied to any <a> elements.

Thanks, Ying - this solved the problem.

After first adding in Customizer / Extra css:

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

I had to add class="no-background-color" to the <a>-element in the html of the block (not in the Extra css-classes of the Advanced section in the right side-bar).

All the best to you!

Gald that you've solved the problem :)

Good job!