title: Logo Animation Coming Towards You
body: <p>I want to make this <strong>Logo Text</strong> <strong>come towards me</strong> like its <strong>popping out</strong> of place with the <strong>Text Zoomed</strong>, when I <strong>Hover Over</strong> it but <strong>not moving left and right</strong>! But I can't seem to do it properly! Can someone help please?</p>
  <p>Below is my HTML and CSS code!</p>
  <p>Try it on <strong>Your Editor</strong> for better <strong>understanding</strong>!</p>
  <p>The element on CSS is <strong>#logo</strong> and <strong>#logo:hover</strong></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>body {
    background-image: url(../images/index_bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
  }
  
  .topnav {
    background-color: black;
    overflow: hidden;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border-top: 3px solid rgb(32, 236, 255);
    border-bottom: 3px solid rgb(32, 236, 255);
    outline: none;
    border-color: rgb(32, 236, 255);
    box-shadow: 0 0 10px rgb(32, 236, 255);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
  }
  
  .topnav a {
    float: left;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    color: rgb(32, 236, 255);
    text-align: center;
    padding: 11px 15px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    position: relative;
  }
  
  .topnav a:hover {
    color: hotpink;
    transition: ease 0.6s;
    font-weight: bold;
  }
  
  .topnav a.active {
    background-color: rgb(32, 236, 255);
    color: white;
    text-shadow: 0px 0px 10px black;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
  }
  
  #logo {
    font-family: "Playball";
    position: absolute;
    left: 43%;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    transition: ease 0.6s;
  }
  
  #logo:hover {
    background-color: blue;
    transform: scale(1.1);
  }
  
  .social {
    float: right;
  }
  
  .footer {
    position: fixed;
    bottom: 3px;
    left: 8px;
    right: 8px;
    text-align: center;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    background-color: black;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-top: 3px solid rgb(32, 236, 255);
    border-bottom: 3px solid rgb(32, 236, 255);
    outline: none;
    border-color: rgb(32, 236, 255);
    box-shadow: 0 0 10px rgb(32, 236, 255);
  }
  
  #footerdesc a:hover {
    background-color: rgb(32, 236, 255);
    color: black;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    transition: ease 0.6s;
    padding: 5px 5px;
  }
  
  #footerdesc {
    text-decoration: none;
    color: cyan;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;header&gt;
      &lt;div class="topnav"&gt;
        &lt;a class="active" href="index.html" title="Homepage"&gt;&lt;i class="fa-solid fa-house"&gt;&lt;/i&gt; Home&lt;/a
              &gt;
              &lt;a href="portfolio.html"
              title="Portfolio Website"
                &gt;&lt;i class="fa-solid fa-wallet"&gt;&lt;/i&gt; Portfolio&lt;/a
              &gt;
              &lt;a href="contact.html"
              title="Contact Website"
                &gt;&lt;i class="fa-regular fa-circle-user"&gt;&lt;/i&gt; Contact&lt;/a
              &gt;
              &lt;a href="about.html"
              title="About Website"&gt;
              &lt;i class="fa-regular fa-comment"&gt;&lt;/i&gt; About&lt;/a&gt;
        &lt;a href="index.html" id="logo" title="You are already at the Homepage!"&gt;BESMART &amp;nbsp; INDUSTRIES&lt;/a&gt;
        &lt;div class="social"&gt;
          &lt;a class="facebook" href="https://facebook.com" target="_blank" title="Facebook Page"&gt;&lt;i class="fa-brands fa-facebook"&gt;&lt;/i&gt;&amp;nbsp Facebook&lt;/a
                &gt;
                &lt;a
                  class="instagram"
                  href="https://instagram.com"
                  target="_blank"
                  title="Instagram Page"
                  &gt;&lt;i class="fa-brands fa-instagram"&gt;&lt;/i&gt;&amp;nbsp Instagram&lt;/a
                &gt;
                &lt;a
                  class="twitter"
                  href="https://twitter.com"
                  target="_blank"
                  title="Twitter Page"
                  id="twitter"
                  &gt;&lt;i class="fa-brands fa-twitter"&gt;&lt;/i&gt;&amp;nbsp Twitter&lt;/a
                &gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/header&gt;
      
          &lt;footer&gt;
            &lt;div class="footer"&gt;
              &lt;p id="footerdesc"&gt;
                Made with love by &gt;
                &lt;a href="index.html" id="footerdesc" title="Visit Our Website"&gt;&lt;em&gt;BE'SMART INDUSTRIES&lt;/em&gt;&lt;/a&gt;
          &lt; &lt;/p&gt;
        &lt;/div&gt;
        &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>