title: CSS Hover Animation Not Working / Hover Does Not Work
body: <p>My CSS Hover is not working properly.
  I was trying to make a transition &amp; animation for a button when you hover but it does not work.
  My code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button.btn__1{
    font-family: 'Ubuntu', sans-serif;
    font-size: 30px;
    font-weight: bold;
    border-radius: 39px;
    margin: 7px;
    padding: 20px 35px;
    background-color: rgba(95, 95, 95, 0.836);
    color: rgb(212, 212, 212);
    letter-spacing: 1px;
    transition: 0.1s;
    opacity: 1;
    
  }
  button.btn__1:hover {
    opacity: 4;
    translate: scaleY(-8px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;center&gt;&lt;button class="btn__1"&gt;&lt;img src="https://img.icons8.com/metro/26/000000/cable-release.png"/&gt;Invite&lt;/button&gt;&lt;/center&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Please help me!
  Sorry if there is any grammar mistakes.</p>