CSS - NAVBAR Slide To Next Bar When Hover-CodePudding

As a newbie now on HTML and CSS, I am running into a problem! I have a NavBar but when I Hover on it and go to the Next Bar (while its hovering), I want to add something like a slider, so when you are hovering to the next bar/section, It will go to the next one smoothly instead of just static movement! Can you help me on this? Thank you so much :) PS: I want to do this on HTML and CSS only and I don't know any JS, if it can be done it would be super helpful for future reference! Below is my full code! Run it on your Editor for better Understanding! :D HTML:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://kit.fontawesome.com/0c0d062607.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" type="text/css" href="Styles/style.css" />
    <title>My Page</title>
  </head>
  <body>
    <header>
      <div >
        <a  href="#home"
          ><i ></i> Home</a
        >
        <a href="portfolio.html"
          ><i ></i> Portfolio</a
        >
        <a href="contact.html"
          ><i ></i> Contact</a
        >
        <a href="about.html"><i ></i> About</a>
        <a href="index.html" id="logo">BESMART &nbsp; INDUSTRIES</a>
        <div >
          <a
            
            href="https://facebook.com"
            target="_blank"
            title="Facebook"
            ><i ></i>&nbsp Facebook</a
          >
          <a
            
            href="https://instagram.com"
            target="_blank"
            title="Instagram"
            ><i ></i>&nbsp Instagram</a
          >
          <a
            
            href="https://twitter.com"
            target="_blank"
            title="Twitter"
            id="twitter"
            ><i ></i>&nbsp Twitter</a
          >
        </div>
      </div>
    </header>

    <main>
      <p id="lorem1">Hello and Welcome to <a href="index.html" id="footerdesc"><em>BESMART INDUSTRIES</em></a>.</p>
      <p id="lorem1">We are so pleased to see you here!</p>

    </main>

    <footer>
      <div >
        <p id="footerdesc">
          Made with love by >
          <a href="index.html" id="footerdesc"><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-repeat: no-repeat;
  background-size: cover;
}

.topnav {
  background-color: black;
  overflow: hidden;
  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);
}

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

.topnav a:hover {
  background-color: rgba(32, 236, 255);
  color: rgb(0, 0, 0);
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.topnav a.active {
  background-color: rgb(32, 236, 255);
  color: white;
  text-shadow: 0px 0px 10px black;
  border-bottom-right-radius: 25px;
}

#logo {
  font-family: "Playball";
  position: absolute;
  left: 43%;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.social {
  float: right;
}

#lorem1 {
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: left;
  margin-right: 930px;
  padding: 2px 2px 0px 2px; 
  border: 3px solid black;
  border-radius: 10px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.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: 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(5, 152, 172);
  color: black;
  border-top-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

#footerdesc {
  text-decoration: none;
  color: cyan;
}

CodePudding user response：

If you add to the .topnav a:hover transition:linear 0.8s; this will give to the navbar a effect. Hope this works for you. Or you can add transition:ease 0.8s.