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

[nudnavda]

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 🙂

[nudnavda]

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".

[nudnavda]

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

[nudnavda]

Perfect – thanks for your help!

[David]

You’re welcome

[nudnavda]

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.

[Ying]

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.

[nudnavda]

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!

[Ying]

Gald that you’ve solved the problem 🙂

Good job!

[Author]

Posts