Weird hover behavior for webfont

[wragen22]

Hi all,
By adding a simple color change via css to my webfont h1, there is some residue from the previous color. This is only happening on some of the fonts. Any idea how this is happening?

&:hover {
@include transition(#4a4a4a .1s ease-in-out);
color: #4a4a4a;
}

[screen-shot](http://i2.photobucket.com/albums/y13/wragen22/screen_zpsa4fefc41.png “screen-shot”)

Much thanks.

[Paulie_D]

We really need to see it in a live link to test/see for ourselves.

[wragen22]

Here is the link. http://jamilopitts.com/kirby/

Also, guess while I have your eyes… having trouble getting my logo image to display. I have tried multiple directory src locations including ../ ect but still not working.. :-/

[wragen22]

anyone?

[Timothy Smith]

On the italics font in your example, it looks like the “ease-in-out” effect is only going the width of a non-italic font. Have you tried adjusting the width of the transition?

[Alen]

You need to increase left and right padding on `h1` element. Issues goes away.

remove `padding-bottom:0;` and add `padding:0 20px;`

edited to add..

where is your image located in your directory structure?

[Alen]

Josh is right, if you load the direct svg path, xml is rendered http://jamilopitts.com/kirby/assets/images/jte.svg

[wragen22]

@joshblackwood tried this…still not working

[Alen]

It works : http://jamilopitts.com/kirby/assets/images/jte.svg

You have it as: `/assets/images/jte.svg` in your code.

Change to: `/kirby/assets/images/jte.svg`

[wragen22]

tried that. still nothing :-/

[Alen]

Try

``

or

``

[Alen]

And your HTML still has syntax errors.

[wragen22]

yes, i’ll get to the syntax. the first spits out the svg code, the second does nothing.

http://jamilopitts.com/kirby/

[Paulie_D]

I have no idea why it’s causing the issue but removing **inline-block** from the h1 solves the problem.

Aren’t [h1] block by default? Why would one change that?

[Alen]

It works

[Author]

Posts