'Logo Animation Coming Towards You

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

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;
}

<body>
  <header>
    <div class="topnav">
      <a class="active" href="index.html" title="Homepage"><i class="fa-solid fa-house"></i> Home</a
            >
            <a href="portfolio.html"
            title="Portfolio Website"
              ><i class="fa-solid fa-wallet"></i> Portfolio</a
            >
            <a href="contact.html"
            title="Contact Website"
              ><i class="fa-regular fa-circle-user"></i> Contact</a
            >
            <a href="about.html"
            title="About Website">
            <i class="fa-regular fa-comment"></i> About</a>
      <a href="index.html" id="logo" title="You are already at the Homepage!">BESMART &nbsp; INDUSTRIES</a>
      <div class="social">
        <a class="facebook" href="https://facebook.com" target="_blank" title="Facebook Page"><i class="fa-brands fa-facebook"></i>&nbsp Facebook</a
              >
              <a
                class="instagram"
                href="https://instagram.com"
                target="_blank"
                title="Instagram Page"
                ><i class="fa-brands fa-instagram"></i>&nbsp Instagram</a
              >
              <a
                class="twitter"
                href="https://twitter.com"
                target="_blank"
                title="Twitter Page"
                id="twitter"
                ><i class="fa-brands fa-twitter"></i>&nbsp Twitter</a
              >
            </div>
          </div>
        </header>
    
        <footer>
          <div class="footer">
            <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>

Solution 1:^[1]

Use the transform property to achieve that on hover.

 transform: scale(1.1);

Solution 2:^[2]

Yes Rasta, you can do it with only scale();

Syntax: transform: scale(2, 0.5); where, 2 belongs to x axis and 0.5 belongs to y axis from the origin.

Suggestions: Also you may add animation effects as well and you may take references from below site and you may copy the code from it for your help.

https://animate.style/

Thanks.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	BakaaCode
Solution 2	Alap Joshi

'Logo Animation Coming Towards You

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]