How can I add a hover state on an SVG file if it's imported as an image in HTML?

Jagriti Khanna 0
Viewed 32

This is what my code looks like:

<div class="social-links mt-1 mb-3">
  <p>
    <a target="_blank" href="https://www.facebook.com/junomattress">
      <span class="markdown-icon">
        <img src="/wp-content/themes/dawn-child/assets/images/icon-facebook.svg">
      </span>
    </a>
  </p>

  <p>
    <a target="_blank" href="https://twitter.com/sleepdouglas">
      <span class="markdown-icon">
        <img src="/wp-content/themes/dawn-child/assets/images/icon-twitter.svg">
      </span>
    </a>
  </p>

  <p>
    <a target="_blank" href="https://www.instagram.com/sleepdouglas/">
      <span class="markdown-icon">
        <img src="/wp-content/themes/dawn-child/assets/images/icon-instagram.svg">
      </span>
    </a>
  </p>
</div>

How can I add a hover state on the SVG, which is imported in the HTML as an image?

svg wordpress image css html
1 Answers

Using HTML attribute class add class to the img tag for the svg elements you are targeting.

For example:

<img class="hvr" src="/wp-content/themes/dawn-child/assets/images/icon-twitter.svg">

Then in CSS you target that class with :hover selector:

.hvr:hover {
    transform: scale(1.5); //just an example
}
kesetovic0
Related