Logo Animation Coming Towards You-CodePudding

I want to make this Logo Text come towards me like its popping out of place with the Text Zoomed, when I Hover Over it but not moving left and right! But I can't seem to do it properly! Can someone help please?

Below is my HTML and CSS code!

Try it on Your Editor for better understanding!

The element on CSS is #logo and #logo:hover

HTML:

<body>
        <header>
          <div >
            <a  href="index.html"
            title="Homepage"
              ><i ></i> Home</a
            >
            <a href="portfolio.html"
            title="Portfolio Website"
              ><i ></i> Portfolio</a
            >
            <a href="contact.html"
            title="Contact Website"
              ><i ></i> Contact</a
            >
            <a href="about.html"
            title="About Website">
            <i ></i> About</a>
            <a href="index.html" id="logo" title="You are already at the Homepage!">BESMART &nbsp; INDUSTRIES</a>
            <div >
              <a
                
                href="https://facebook.com"
                target="_blank"
                title="Facebook Page"
                ><i ></i>&nbsp Facebook</a
              >
              <a
                
                href="https://instagram.com"
                target="_blank"
                title="Instagram Page"
                ><i ></i>&nbsp Instagram</a
              >
              <a
                
                href="https://twitter.com"
                target="_blank"
                title="Twitter Page"
                id="twitter"
                ><i ></i>&nbsp Twitter</a
              >
            </div>
          </div>
        </header>
    
        <footer>
          <div >
            <p id="footerdesc">
              Made with love by >
              <a href="index.html" id="footerdesc" title="Visit Our Website"><em>BE'SMART INDUSTRIES</em></a>
              <
            </p>
          </div>
        </footer>
      </body>
    </html>

CSS:

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;
      padding: ;
    
    }
        
        .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;
        }

CodePudding user response：

Use the transform property to achieve that on hover.

 transform: scale(1.1);

CodePudding user response：

Maybe you can use transform: scale() on that logo

transform: scale(1.1)

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()