Translate transition a span inside a div and section

Question

Im trying to translate a span when hover, but the only transition that does not work, is the translate one.

<section>    
     <div class="clipboard">
          <span id="cp">Copy to Clipboard!</span>
     </div>    
</section>

section .clipboard{
    margin-top: 50px;
    margin-bottom: 20px;
    
}
.clipboard #cp{
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: bold;
    transition: 0.3s;
    
    
    
    
}
#cp:hover{
    transform: translateY(-2px);
    text-decoration: underline;
    color: rgb(155, 44, 175);
    
}

Maybe my CSS syntax here is wrong or I don't know, but when hover, text color and underline work. Thanks in advance!!!

Take a look [here](https://stackoverflow.com/questions/31860157/css3-transform-translate-on-hover-with-transition) — Nikola Pavicevic, Jul 26 '21 at 22:33

score 0 · Accepted Answer · answered Jul 26 '21 at 22:39

As stated by this comment transforms work on elements with block level display.

So changing your code to this:

#cp:hover{
    transform: translateY(-2px);
    text-decoration: underline;
    color: rgb(155, 44, 175);
    display:  inline-block;
}

will solve your problem.

Translate transition a span inside a div and section

1 Answers1