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

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1359817
    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!

    #1360272
    Leo
    Staff
    Customer Support

    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 🙂

    #1360603
    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

    #1361092
    Leo
    Staff
    Customer Support

    The wrong quotation mark is being used here.

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

    #1361488
    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 😉

    #1361641
    David
    Staff
    Customer Support

    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;
    }
    #1361661
    ad

    Perfect – thanks for your help!

    #1361693
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.