[Resolved] How-to highlight on hover SVG in an image widget

Home Forums Support How-to highlight on hover SVG in an image widget

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1063829
    Alex

    Hello GP,

    I have my company SVG logo in an image widget in the Footer Bar. I would like to highlight the logo with the ‘Link Hover’ color from the Footer Widgets colors. Just like the social icons get highlighted on hover.

    What is the best way to achieve this?

    Thanks!

    Alex

    #1064127
    David
    Staff
    Customer Support

    Hi there,

    the SVG would have to be added inline.
    This would mean editing your SVG file in a text editor and copying and pasting the code directly into a HTML widget instead of adding it as an image. Then it can be styled with CSS.

    #1064151
    Alex

    Hi David,

    I’ve added it in the middle widget of the footer, under the social icons. It doesn’t highlight on hover. Line 537. Am I missing a tag?

    #1064160
    David
    Staff
    Customer Support

    Ok so now we need a class to style it with so edit your anchor tag and include the class of logo-link eg:

    <a class="logo-link" href="*******" title="******" rel="home">
    <!-- SVG Code in here -->
    </a>

    Then this CSS:

    .logo-link:hover svg {
        fill: #23bfec;
    }
    #1064167
    Alex

    Just perfect! Thanks David.

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