Turn text into italic on hover!

Navigation
4

Well, I have a paragraph and I want it to stay with font-style: italic; when I move the mouse over, what properties should I do in :hover ?! I would like it to be a 0.3-second transition

    
asked by anonymous 23.12.2017 / 14:25

2 answers

6

First of all, the only pseudo-element that exists for rows is the ::first-line and it will only get the first rows, according to font-style other than font-weight does not support numeric values for it to be done a transition between non-italic and italic .

But all is not lost

You can simulate italic using transform and if you consider paragraphs by <p> it will be possible, a working example:

  

Note: To avoid the leap effect (the such bug), just add: transform: skewX(0.001deg); 

.container p {
    transform: skewX(0.001deg); /*evita o "efeito de pulo"*/
    transition: transform .3s ease-in-out;
}

.container p:hover {
    transform: skewX(-20deg);
}
<div class="container">
     <p>foo bar baz</p>

     <p>Hello World!</p>

     <p>Olá Mundo!</p>
</div>

Of course this is not italic, if you have styles in the paragraphs, such as borders or background they can be affected too, to avoid this you can add <span> to each paragraph without style and do for example: 

.container p {
    background: #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 5px;
}

.container p span {
    display: inline-block;
    transform: skewX(0.001deg); /*evita o "efeito de pulo"*/
    transition: transform .3s ease-in-out;
}

.container p:hover span {
    transform: skewX(-20deg);
}
<div class="container">
     <p>
         <span>foo bar baz</span>
     </p>

     <p>
         <span>Hello World!</span>
     </p>

     <p>
         <span>Olá Mundo!</span>
     </p>
</div>

Trying to remove blurry during animation

Unfortunately the title says "trying" because it's not 100% guaranteed, it depends a lot on the hardware and software you use, the blurry effect in the text is very common in Chrome, the techniques (attempts) that there are are:

Use -webkit-font-smoothing: subpixel-antialiased; :

It should look like this: 

.container p {
    transition: transform .3s ease-in-out;
    -webkit-font-smoothing: subpixel-antialiased;
}

And in the second example: 

.container p span {
    display: inline-block;
    transition: transform .3s ease-in-out;
    -webkit-font-smoothing: subpixel-antialiased;
}

However on computers with generic video driver it will probably not work as expected, or it may not work at all.

Use transform: translateZ(0) ...

This is a hack , it for some reason in Chrome helps in rendering acceleration, but from what I read in some cases it works and in others it does not, it probably depends on the user equipment:

> 
.container p:hover span {
    transform: translateZ(0) skewX(-20deg);
}

And in the second example: 

.container p:hover span {
    transform: translateZ(0) skewX(-20deg);
}

You can try both, but as I mentioned before, it will probably depend on hardware (hardware and software).

Note: @keyframes does not solve the blurry effect problem, what occurred in hugo's response is that he used the larger font, , before the transition and putting transform: skewX(0.001deg); of the source will be almost identical to 2em 

#comtransform {
    font-size: 2rem;
    font-weight: bold;
    color: blue;
    transform: skewX(0.001deg); /*evita o "efeito de pulo"*/
    transition: transform .3s ease-in-out;
}

#comtransform:hover {
    transform: skewX(-20deg);
}
<p id="comtransform">@keyframes</p>
    
23.12.2017 / 18:08
1

I did a test using @keyframes instead of transition And the result was even interesting, it greatly decreased that buggizinho at the time of the text.

I made a simple example, see the result. 

p#anima {
    font-size: 2em;
    font-weight: bold;
    color: red;
    transition: all 300ms;
}
p#anima:hover {
    transform: skewX(-10deg);
}

p#key{
    font-size: 1.2rem;
    font-weight: bold;
    color: blue;
}
p#key-small{
    font-size: 0.6rem;
    font-weight: bold;
    color: blue;
}
p#key-big{
    font-size: 3rem;
    font-weight: bold;
    color: blue;
}
p#key:hover, p#key-small, p#key-big {
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 500ms; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
p#key:not(:hover), p#key-small:not(:hover), p#key-big:not(:hover) {
    -webkit-animation-name: rever; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 500ms; /* Safari 4.0 - 8.0 */
    animation-name: rever;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from   {transform: skewX(-3deg);}
    to {transform: skewX(-10deg);}
}
/* Standard syntax */
@keyframes example {
    from   {transform: skewX(-3deg);}
    to {transform: skewX(-10deg);}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes rever {
    from   {transform: skewX(-8deg);}
    to {transform: skewX(-0deg);}
}
/* Standard syntax */
@keyframes rever {
    from   {transform: skewX(-8deg);}
    to {transform: skewX(-0deg);}
}
<p id="anima">transition transform</p>

<p id="key">@keyframes</p>

<p id="key-small">@keyframes-small</p>

 <p id="key-big">@keyframes-big</p>
    
26.12.2017 / 17:29
What do these arguments mean in the "git-checkout" command? Query on sql query