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

[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

[David]

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.

[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?

[David]

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

[Alex]

Just perfect! Thanks David.

[David]

Glad to be of help

[Author]

Posts