How do I link images with an a tag while applying css to the images?

Question

I'm trying to link my images to their corresponding sites, so I added my images inside an <a> tag.

 <section id="contact-section">
     <h2 class="section-heading">Talk to us</h2>
     <p>Reach us via <span><a href="mailto:info@example.com">Email</a></span> or follow us on social icons below. Thank you.</p>

      <a href="https://www.facebook.com/" target="_blank">
          <img src="images/facebook.png" alt="facebook icon">
      </a>

      <a href="https://twitter.com/" target="_blank">
          <img src="images/twitter.png" alt="twitter icon">
      </a>

      <a href="https://www.instagram.com/" target="_blank">
          <img src="images/instagram.png" alt="instagram icon">
      </a>

      <a href="https://www.pinterest.com/" target="_blank">
          <img src="images/pinterest.png" alt="pinterest icon">
      </a>
 </section>

and my css is the following:

#contact-section > img {
    width: 100%;
    max-width: 40px;
    height: auto;
    margin-bottom: 1rem;
}

#contact-section > img:hover {
    transform: scale(1.2) rotate(2deg);
}

the result is this:

What I want the result to be is this:

When I remove the <a> tags, I do get my desired result. It seems like the <a> tag disregards my img styling. How do I fix this?

Answer 1

Try to remove > in CSS

#contact-section img {
    width: 100%;
    max-width: 40px;
    height: auto;
    margin-bottom: 1rem;
}

#contact-section img:hover {
    transform: scale(1.2) rotate(2deg);
}

or remove > and add a tag too

#contact-section a img {
    width: 100%;
    max-width: 40px;
    height: auto;
    margin-bottom: 1rem;
}

#contact-section a img:hover {
    transform: scale(1.2) rotate(2deg);
}