Mouse hover effect italic

[stefanstraeter]

Hi there,
how can I create this over effect like on this page?

https://charleyray.co.uk/design/

Best regards,
Stefan

[chrsgrbr]

Hi Stefan,

you’ll have to use some custom css. If you use

a:hover {
font-style: italic;
}

all of your links will turn italic once your mouse hovers over them.

Best wishes
Christian

[Richard]

@chrsgrbr

Thanks Christian! 👍⭐️

[stefanstraeter]

Perfect! It is working :) Love that effect!

[dani]

Try it with

transition: all 200ms;

:D

[Richard]

Thanks @dani ! 👍

[Wynz]

Hey,
The probleme with the code above is, that the software just shifting the letters to the side, which makes the letters look weird. Fonts normally have specific italics which are drawn manually individually.

So in this case, I just want to change a font to another font when hovering. I have a specific Webfont uploaded when hovering above text.
What's the CSS Code for that?

Best
Wynz

[arminunruh]

i think its best if you use a font that is a "variable font"

one of the axis of the font should be italics, and then you just need to find the css that changes that axis, and then change that on hover

for example here: https://v-fonts.com/

there is a font:

it has the italics axis. this value can have different values and is set via css, thus it can be changed on .yourselector:hover {}

[Wynz]

Variable it no option at the moment. But isn't it possible to change a font easily when hovering over another one?
Like changing a font from HELVETICA to TIMES NEW ROMAN when hovering above it (extreme example) …

I feel like the code above is really simple and something similar will work, but I have no clue what the code will look like.

Something like:
a:hover {
font: Times New Roman;
}

[arminunruh]

yea you can just change the font family on hover, sure
but it won't give you a transition animation

[Wynz]

But what would the CSS-Code be for that? Might me really simple solution, but I haven't found anything …

[panteley]

a:hover {
font-family: [the name of the font in italic];
}

Not sure if it will work, but try it out.

[Wynz]

@panteley Well that was easy … THX haha – Was trying it with "font" etc.